Мат Пери от Framer и разглеждаме библиотеката за анимация React Framer Motion.
Първо ще разгледаме колко прост е API. Вие контролирате всичко много декларативно чрез подпори върху елементи във вашия JSX. Управлението на анимацията на този слой е много интуитивно и свързано с потребителския интерфейс и състояние по смислен начин.
Всеки пример, който разглеждаме, е по-реален и включва повече функции на това, на което е способен Framer Motion. Разработчиците на React ще харесат синтаксиса на всичко това, а всички останали ще харесат невероятно ефективните и гладки резултати.
В крайна сметка разглеждаме самия Framer, който използва точно тази библиотека вътрешно, за да направи всички анимационни неща, които Framer прави. Заинтригуван от Фреймър? Изтеглете Framer X.
Демо 1: Основен синтаксис
Демо 2: Варианти
Демо 3: AnimatePresence и layoutTransition
Бонус: проверете функционалността „превъртане за отхвърляне“ в изскачащия прозорец на изображението.