Анимация на странице - это всегда красиво и не всегда сложно. Наверняка вы используете анимацию типа transition при наведении на различные элементы или типа @keyframes для отображения элементов на странице. Давайте сейчас разберемся, какие способы назначения анимации существуют для компонентов во Vue.js.

Компонент Transition

Для анимации компонентов во Vue 3 существует специальный компонент-обертка, который называется <Transition>.

<Transition>является встроенным компонентом: это означает, что он доступен в любом шаблоне компонента без необходимости его регистрации. Его можно использовать для применения анимации появления и исчезновения элемента или компонента, переданным ему через слот по умолчанию. Для того, чтобы анимация сработала, нужно, чтобы выполнялось одно из следующих действий:

  • Условный рендеринг черезv-if
  • Условное отображение черезv-show
  • Переключение динамических компонентов с помощью <component> специального элемента
  • Изменение специального аттрибута key

Чтобы назначить анимацию, существует 4 предопределенные в официальной документации класса, внутри которых нужно использовать  свойство transition (.v-enter-active, .v-leave-active ) и другие свойства, которые должны быть анимированы (.v-enter-from, .v-leave-to).

Например, этот код позволит запускать анимацию исчезновения/появления в зависимости от значения константы show, которая меняется с true на false и наоборот при нажатии на кнопку.

Пример с появлением и исчезновением меню:

See the Pen Vue.js 3 Transition by Elen (@ambassador) on CodePen.0

Когда элемент в <Transition>компоненте вставляется или удаляется, происходит следующее:

  1. Vue автоматически определит, применены ли к целевому элементу CSS-переходы или анимация. Если это произойдет, в соответствующее время будет добавлено/удалено несколько классов перехода CSS .
  2. Если есть слушатели перехватчиков JavaScript , эти перехватчики будут вызываться в соответствующие моменты времени.
  3. Если переходы/анимации CSS не обнаружены и не предоставлены перехватчики JavaScript, операции DOM для вставки и/или удаления будут выполняться в следующем кадре анимации браузера.

CSS классы в компоненте Transition

Для переходов входа/выхода (появления/исчезновения) во Vue 3 применяется шесть классов. Поскольку анимации связаны с добавлением (входом) элемента в DOM-структуру страницы (Enter) и исчезновением (выходом - Leave) элемента, то и названия классов привязаны к этим 2-м состояниям.

Как они действуют, можно посмотреть на картинке.

Схема перехода

  1. v-enter-from: Начальное состояние входа (появления элемента). Добавляется до вставки элемента, удаляется через один кадр после вставки элемента.
  2. v-enter-active: Активное состояние для входа. Применяется на протяжении всей фазы входа. Добавляется перед вставкой элемента и удаляется после завершения transition/animation. Этот класс можно использовать для определения продолжительности (duration), задержки (delay)  и кривой замедления (easing) для transition в анимации появления (входа).
  3. v-enter-to: Конечное состояние входа. Добавляется через один кадр после того, как элемент вставлен (в то же время удаляется классv-enter-from), удаляется по завершении  transition/animation.
  4. v-leave-from: Начальное состояние исчезновения. Добавляется сразу при срабатывании transition исчезновения, удаляется через один кадр.
  5. v-leave-active: Активное состояние исчезновения элемента. Применяется в течение всей фазы выхода. Добавляется сразу при срабатывании анимации исчезновения и удаляется после завершения transition/animation. Этот класс можно использовать для определения продолжительности (duration), задержки (delay)  и кривой замедления (easing) для transition в анимации исчезновения (выхода) элемента.
  6. v-leave-to: Конечное состояние отпуска. Добавляется через один кадр после срабатывания transition исчезновения (выхода) (одновременно удаляется классv-leave-from), удаляется при завершении transition/animation.

Кроме этих классов, мы можем использовать похожие по названию, но с именем transition-анимации, указанной для компонента  <Transition>.

Именованный Transition

Мы можем использовать разные классы для компонента Transition, если зададим ему атрибут name. Это удобно тем, что мы можем в одном и том же компоненте использовать разные виды (классы) анимации.

В этом примере, по сути мы используем те же классы, что и ранее, но вместо .v- задаем имя нашей анимации.

Пример "вживую":

See the Pen Vue.js 3 Transition + Animate.css by Elen (@ambassador) on CodePen.0

Анимация появления

Если вы хотите применить transition при начальном рендеринге узла, вы можете добавить атрибут appear к компоненту Transition:

Тогда ваш компонент появится с той анимацией, которую вы прописали в классах.

See the Pen Vue.js 3 Transition appear by Elen (@ambassador) on CodePen.0

Отдельный компонент для анимированного контента

В том случае, когда нам нужно использовать анимацию какого-либо типа несколько раз мы можем в одном компоненте описать все нужные нам классы и сделать его за счет использования <slot></slot> "оберткой" для любого другого кода, который должен эту анимацию использовать. Т.е. мы как бы повторяем  функционал компонента Transition, но упрощенно, только  для определенного вида анимации.

Код в компоненте, который мы разместим в файле PopTransition.vue, будет таким:

Тогда в файле App.vue или любом другом после импорта нашего PopTransition.vue мы можем обернуть в наш анимационный компонент другой элемент:

Таким образом мы можем переиспользовать наш код столько раз, сколько потребуется.

Далее мы еще не раз воспользуемся таким подходом для создания других анимаций.

Анимация, основанная на классах Tailwind

TailwindCss стала уже очень популярным CSS-фреймворком, т.к. позволяет использовать комбинацию классов для разных нужд. Она особенно хороша для Vue.js или React.js, т.к. подтягивает только те классы, которые необходимы в данном проекте.

Для установки TailwindCss в терминале нужно набрать следующие команды:

После этого у вас будет создан файл tailwind.config.js. В нем нужно добавить конфигурацию:

Затем в файле main.css вверху  нужно добавить все или избранные директивы (часто достаточно только @tailwind utilities;):

Все, теперь вы можете использовать классы этой библиотеки.

Вы можете найти классы, предназначенные для transition-анимации в документации TailwindCSS. Именно их нужно использовать в сочетании с компонентом <Transition> из Vue, указав их в специальных атрибутах:

Указав <slot></slot> вместо конкретной обертки, мы получаем возможность использовать этот компонент в качестве обертки уже в другом компоненте, предварительно импортировав его:

Пример использования классов Tailwindcss :

See the Pen Vue.js 3 Transition with Tailwindcss classes by Elen (@ambassador) on CodePen.0

Анимация на основе свойства @keframes

В этом случае нам опять понадобится именованный компонент <Transition> и классы, в которых свойство transition меняется на animation. Ну, и конечно, описание кадров самой анимации в свойстве @keyframes.

Обратите внимание, что в классе .bounce-leave-active  свойство animation вызывается с параметром reverse, т.е. анимация воспроизводится наоборот.

При использовании animate.css для тех же целей мы можем указать разные классы.

Пример из кода выше можно покликать вживую:

See the Pen Vue.js 3 Transition with @keyframes by Elen (@ambassador) on CodePen.0

Компонент-обертка с анимацией @keframes

Для использования анимации типа @keframes в этом случае нам нужно будет создать отдельный .vue файл (назовем его BounceInDownTransition.vue) и разместить там компонент Transition с атрибутом name, который будет соответствовать имени класса, использующего такую анимацию, аналогично тому, как мы это делали в коде выше. Само свойство @keframes мы размещаем тоже в блоке style.

В файле App.vue или в другом компоненте, где уже нужно использовать анимацию, размещаем примерно такой код:

В результате при клике на кнопке мы увидим анимированное появление и исчезновение заголовка.

Анимация с помощью Animate.css

animate.css официальный сайт

Библиотека Animate.css является сборником классов, которые как раз основаны на использовании свойства @keframes. Почитать о ней подробнее вы можете в отдельной статье. Она очень хороша для использования в вашем Vue-проекте.

Для использования этой библиотеки сначала ее надо загрузить в проект:

Затем ее нужно подключить (импортировать) в тот файл, в котором вы собираетесь ее использовать:

Для создания анимации вы можете выбрать и скопировать любой класс из всех в Animate.css, но, если вы хотите использовать класс с In в названии, то для обратной анимации вам понадобится аналогичный класс с Out в его имени. Добавлять нужно не только названия классов, но и класс animate__animated, т.к. в нем указывается продолжительность анимации. Используйте для этих манипуляций атрибуты enter-active-class и leave-active-class:

В файле App.vue нужно добавить код:

Пример в действии:

See the Pen Vue.js 3 Transition + Animate.css by Elen (@ambassador) on CodePen.0

Анимация с помощью GSAP

Для начала нужно установить пакеты, которые позволят вам работать с GSAP

Затем в файле компонента нужно выполнить импорт gsap:

Функцию done, которая есть во Vue-хуке onEnter, нам нужно вызывать для того, чтобы удалить элемент из структуры DOM после окончания анимации.

Обратите внимание, что поскольку мы не используем css-классы для transition, то атрибут :css="false". Остальные атрибуты - это хуки Vue, которые предполагают наличие соответствующих функций. Функции будут вызваны одна за другой.

Используем теперь этот компонент, как обертку для элемента в другом компоненте.

Несколько упрощенный пример этого кода вы найдете ниже:

See the Pen Vue.js 3 Transition with GSAP by Elen (@ambassador) on CodePen.0

Вот, что еще можно сделать на основе плагина ScrollTrigger от GSAP:

See the Pen Play with Header on Page Transitions by GSAP (@GreenSock) on CodePen.0

Анимация с помощью плагина AutoAnimate

Всю нужную документацию вы найдете на официальном сайте AutoAnimate.

Для начала нужно установить пакет с npm или yarn:

Далее в файле main.js вашего проекта нужно импортировать этот плагин наряду с другими импортами:

После этого можно использовать атрибут v-auto-animate для контейнера с элементами, которые должны быть анимированы.

В этом коде анимация происходит при "перетасовке" массива кликом на кнопке "Shuffle" или при клике на любом цветном боксе, когда он удаляется и происходит перестройка внешнего вида блока с class="flex-wrapper".

Видео по теме на английском:

Анимация при скролле с помощью @vueuse/motion

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

Как и с предыдущим плагином, сначала нужно добавить пакет:

Затем вы можете добавить vueuse/motion глобально для всех файлов проекта, добавив код в main.js:

Если вы хотите импортировать код директивы только из компонентов, которые его используют, импортируйте директиву и установите ее на уровне компонента.

Варианты доступных анимаций можно найти по ссылке Presets. Отсюда можно выбрать, каким образом должен быть анимирован ваш блок.

Добавить анимацию нужно в каждый из блоков. Если вы хотите, чтобы анимация выполнялась каждый раз при скролле, необходимо выбирать варианты вроде v-motion-slide-visible-right или v-motion-pop-visible. Если вам нужно, чтобы анимация проигралась один раз, то можно использовать что-либо с приставкой -once, например, v-motion-pop-visible-once.

В коде ниже мы создаем ряд цветных секций на основе предыдущего кода с появлением каждой из них при скролле с анимацией.

Анимация в стиле Material Design

Material Design - это разработка Google, и в этом дизайне есть свой подход к анимациям. Например, очень популярна "волновая" анимация, при которой от места клика расходится "волна" какого-ибо цвета.

Для такого вида анимации в проектах на Vue мы можем использовать плагин v-wave. На самой страничке плагина вы уже можете увидеть, какие анимации будут вам доступны.

Для установки плагина наберите в терминале:

В main.js добавьте код:

Можно глобально установить в том же main.js настройки:

Можно настроить ваш компонент, задав данный для эффекта волны для какого-либо элемента. Как правило, это кнопки.

Для использования настроек по умолчанию достаточно добавить к элементу с анимацией атрибут v-wave:

Класс вы можете задать свой в соответствии с теми стилями, которые вам нужны.

Изменяем настройки частично:

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

Для изменения триггера, т.е. элемента, реагирующего на клик, можно использовать такой код:

Здесь мы указываем, что кликать нужно на элемент button, а волна будет у div-a.

Пример вживую:

See the Pen Vue.js 3 Transition with V-Wave by Elen (@ambassador) on CodePen.0

В целом, если вам нужно реализовать эффект волны для Material Design, то стоит поиграть с настройками и определиться, что именно вам подходит.

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *