Как создать анимацию входа и выхода для компонента React с помощью Framer Motion

Анимация компонента React, когда он появляется на экране или покидает его, может быть сложной задачей. Это связано с тем, что когда вы скрываете компонент, React удаляет его из DOM, что делает его недоступным для анимации. Когда вы снова показываете компонент, React повторно добавляет его в DOM, что может привести к резкому появлению без анимации.

Вы можете решить эту проблему с помощью библиотеки анимации, такой как Framer Motion.

Что такое Framer Motion?

Framer Motion — это готовая к производству библиотека анимации для React. Он предоставляет ряд компонентов, крючков, ключевых кадров и пользовательских функций плавности для создания и управления анимацией.

Одним из преимуществ Framer Motion является то, что он позволяет легко создавать плавные и плавные анимации без необходимости писать много кода JavaScript или выполнять расчеты для каждого перехода.

Он также имеет систему событий, которую вы можете использовать для запуска анимации на основе пользовательского ввода, такого как нажатия кнопок и жесты, создавая интерактивные и динамические интерфейсы, которые кажутся отзывчивыми.

Чтобы продемонстрировать, как использовать Framer Motion в React, вы будете анимировать компонент, который появляется на экране и покидает его при нажатии кнопки.

Создание проекта React

Чтобы создать проект React, вам нужно установите Node.js и npm (диспетчер пакетов Node) на свой компьютер если нет.

Установив эти зависимости, вы можете создать новый проект React с помощью Vite запустив команду yarn vite в своем терминале.

пряжа вит

Эта команда создаст новую папку со всеми предварительно установленными необходимыми файлами и зависимостями. Перейдите в папку и запустите сервер разработки с помощью команды yarn start.

начало пряжи

Установка Framer Motion в React

Установите Framer Motion, выполнив эту команду:

npm установить framer-motion

Эта команда добавит Framer Motion в качестве зависимости к вашему проекту.

Анимация компонента

Чтобы анимировать компонент, когда он входит и покидает экран в React с помощью Framer Motion, вам нужно обернуть его в компонент движения.

Компонент движения предоставляет набор свойств для анимации входа и выхода компонента. Вы можете использовать свойства Initial, Animate и Exit, чтобы контролировать его видимость и положение.

Чтобы увидеть его в действии, добавьте следующий код вверху файла App.jsx, чтобы импортировать компонент движения из framer-motion.

Импортировать { движение } от"фреймер-движение";

Затем создайте компонент, который вы хотите анимировать, обернув его компонентом движения. В этом примере используется элемент div, но вы можете использовать любой другой элемент, например, button, li и p.

Импортировать {движение, AnimatePresence} от"фреймер-движение"
функцияПриложение() {
возвращаться (
 <>

 инициал = {{ Икс: -100, непрозрачность: 0 }}
 анимировать={{ Икс: 0, непрозрачность: 1 }}
 выход={{ Икс: -100, непрозрачность: 0 }}
 >
Отправлено!</p>
 </motion.div>

 </>
 )
}

Компонент движения позволяет анимировать элемент div, содержащий текст «Отправлено!».

исходный, оживлять, и Выход свойства компонента движения определяют анимацию входа и выхода компонента. Когда компонент первоначально визуализируется, он начинается с позиции x -100 (за пределами экрана слева) и непрозрачности 0 и становится невидимым.

Свойство animate определяет, как должен анимироваться компонент при выходе на экран, в данном случае перемещаясь из x позиции -100 до позиции x 0 (скользя слева) и постепенно переходя в непрозрачность 1 и становясь полностью видимый.

Наконец, свойство выхода определяет, как компонент должен анимироваться, когда вы удаляете его с экрана. В этом случае компонент будет скользить за пределы экрана влево с позицией x, равной -100, и постепенно исчезать до непрозрачности, равной 0.

Вам также необходимо обернуть компонент движения компонентом AnimatePresence из framer-motion, чтобы анимировать компоненты, когда вы удаляете их из дерева React DOM.

Теперь, когда вы определили анимацию входа и выхода, вы можете добавить кнопку для запуска анимации. Вот модифицированный компонент с кнопкой:

Импортировать { AnimatePresence, движение } от"фреймер-движение";
Импортировать { состояние использования } от"реагировать";
функцияПриложение() {
константа [видимо, setIsVisible] = useState(истинный);
константа переключить видимость = () => {
 setIsVisible(!Видимо);
 };
возвращаться (
 <>

 {Видимый && ( <движение.div
 инициал = {{ Икс: -100, непрозрачность: 0 }}
 анимировать={{ Икс: 0, непрозрачность: 1 }}
 выход={{ Икс: -100, непрозрачность: 0 }}
 >
Отправлено!</p>
 </motion.div>)}
 </AnimatePresence>

 Поставить в известность
 </button>
 </>
 )
}

Этот обновленный код добавляет переменную состояния с именем isVisible с помощью хука useState. Эта переменная отслеживает, должен ли компонент быть видимым. Функция toggleVisibility переключает значение isVisible между true и false при нажатии кнопки.

Ты сейчас рендеринг компонента условно в зависимости от значения isVisible. Если isVisible имеет значение true, компонент движения будет отображаться вместе с анимацией входа.

Наконец, добавьте к кнопке обработчик события onClick, который вызывает функцию toggleVisibility, обновляет состояние isVisible и запускает анимацию входа или выхода компонента движения.

Добавление функции плавности

Функция плавности управляет скоростью изменения анимации во времени. Он определяет время анимации, указывая, как анимация должна ускоряться или замедляться по мере ее продвижения. Без функции плавности анимация может отображаться слишком быстро.

Framer Motion предоставляет на выбор несколько функций плавности, включая easyInOut. Импортируйте его в верхней части App.jsx из framer-motion, чтобы использовать его.

Импортировать {движение, easyInOut} от"фреймер-движение";

Затем добавьте его к объекту перехода в компоненте движения:

 инициал = {{ Икс: -100, непрозрачность: 0 }}
 анимировать={{ Икс: 0, непрозрачность: 1, переход: { продолжительность: 0.5, простота: easyInOut } }}
 выход={{ Икс: -100, непрозрачность: 0, переход: { продолжительность: 0.5, простота: easyInOut } }}
>
Отправлено!</p>
</motion.div>

Свойство duration указывает, как долго должна работать анимация.

Используйте простой CSS для простых анимаций

С Framer Motion можно делать гораздо больше, включая 3D-анимацию. Однако вам не всегда нужна библиотека для создания анимации. Для простых анимаций, таких как переходы при наведении, вы всегда можете использовать простой CSS.