Помимо этих двух компонентов, мы также можем применять анимацию в Vue, используя другие методы, такие как переключение классов CSS или анимацию, управляемую состоянием, через привязки стилей

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

Это пример самого простого использования

Переходные классы

v-enter-active и v-leave-active дайте нам возможность указывать различные кривые замедления для переходов входа/выхода, пример которых мы увидим в следующих разделах.

Переход можно назвать с помощью name свойства:

Для именованного перехода его классы перехода будут иметь префикс его имени вместо v. Например, fade-enter-active вместо v-enter-active. CSS для перехода затухания должен выглядеть следующим образом:

Transition чаще всего используется в сочетании с собственными CSS-переходами , как показано в базовом примере выше. Свойство CSS transition— это сокращение, которое позволяет нам указать несколько аспектов перехода, включая свойства, которые должны быть анимированы, продолжительность перехода и кривые замедления .

Вот более сложный пример, в котором происходит переход нескольких свойств с разной продолжительностью и кривыми замедления для входа и выхода

Нативная CSS-анимация применяется так же, как и CSS-переходы, с той разницей, что *-enter-from она удаляется не сразу после вставки элемента, а по animationendсобытию.

Для большинства CSS-анимаций мы можем просто объявить их в классах *-enter-active и *-leave-active. Вот пример:

Они переопределят обычные имена классов. Это особенно полезно, если вы хотите объединить систему переходов Vue с существующей библиотекой анимации CSS, такой как Animate.css

Vue необходимо подключить прослушиватели событий, чтобы знать, когда переход закончился. Это может быть transitionend или animationend, в зависимости от типа примененных правил CSS. Если вы используете только один или другой тип, Vue может автоматически определить правильный тип.

Однако в некоторых случаях вам может потребоваться использовать оба элемента в одном элементе, например, иметь CSS-анимацию, запускаемую Vue, вместе с эффектом перехода CSS при наведении курсора. В этих случаях вам придется явно объявить тип, о котором вы хотите, чтобы Vue заботился type, передав свойство со значением либо animation или transition

Хотя классы перехода применяются только к прямому дочернему элементу в Transition, мы можем переходить вложенные элементы с помощью вложенных селекторов CSS:

Мы даже можем добавить задержку перехода к вложенному элементу при вводе, что создаст последовательность анимации ввода в шахматном порядке:

Однако это создает небольшую проблему. По умолчанию Transition компонент пытается автоматически определить момент завершения перехода, прослушивая первое transitionend событие или animationend событие в корневом элементе перехода. При вложенном переходе желаемое поведение должно ожидать завершения переходов всех внутренних элементов.

В таких случаях вы можете указать явную продолжительность перехода (в миллисекундах), используя durationсвойство transition компонента. Общая длительность должна соответствовать задержке плюс продолжительности перехода внутреннего элемента:

При необходимости вы также можете указать отдельные значения длительности входа и выхода с помощью объекта

Для сравнения, такие свойства, как height или margin будут запускать макет CSS, поэтому их анимация обходится гораздо дороже, и их следует использовать с осторожностью. Мы можем проверить такие ресурсы, как CSS-Triggers , чтобы увидеть, какие свойства будут активировать макет, если мы их анимируем

Вы можете подключиться к процессу перехода с помощью JavaScript, прослушивая события компонента Transition

Эти хуки можно использовать в сочетании с CSS-переходами/анимацией или отдельно.

При использовании переходов только на JavaScript обычно рекомендуется добавить свойство :css="false". Это явно указывает Vue пропустить автоматическое обнаружение перехода CSS. Помимо большей производительности, это также предотвращает случайное вмешательство правил CSS в переход

С помощью :css="false" мы также несем полную ответственность за контроль завершения перехода. В этом случае doneобратные вызовы необходимы для перехватчиков @enter и @leave. В противном случае хуки будут вызываться синхронно, и переход завершится немедленно.

Вот демонстрация использования библиотеки GreenSock для выполнения анимации. Вы, конечно, можете использовать любую другую библиотеку анимации, например Anime.js или Motion One

Переходы можно повторно использовать через систему компонентов Vue. Чтобы создать многоразовый переход, мы можем создать компонент, который обертывает компонент Transition и передает содержимое слота:

Теперь MyTransition можно импортировать и использовать так же, как встроенную версию:

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

Помимо переключения элемента с помощью v-if / v-show мы также можем переходить между двумя элементами с помощью v-if / v-else / v-else-if, если мы уверены, что в любой момент времени отображается только один элемент:

В предыдущем примере входящие и выходящие элементы анимируются одновременно, и нам пришлось сделать их, position: absolute чтобы избежать проблем с макетом, когда оба элемента присутствуют в DOM.

Однако в некоторых случаях это не вариант или просто нежелательное поведение. Мы можем захотеть, чтобы выходящий элемент анимировался первым, а входящий элемент вставлялся только после завершения анимации ухода. Оркестровать такие анимации вручную было бы очень сложно — к счастью, мы можем включить такое поведение, передав Transition свойство mode

Transition также поддерживает mode="in-out", хотя используется гораздо реже

Transition также может использоваться вокруг динамических компонентов

Transition реквизит вроде nameтоже может быть динамичным! Это позволяет нам динамически применять различные переходы в зависимости от изменения состояния:

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

Вы также можете применять различное поведение в перехватчиках переходов JavaScript в зависимости от текущего состояния вашего компонента. Наконец, окончательный способ создания динамических переходов — это использование повторно используемых компонентов перехода , которые принимают реквизиты для изменения характера используемых переходов. Это может показаться банальным, но единственным ограничением на самом деле является ваше воображение.

TransitionGroup — это встроенный компонент, предназначенный для анимации вставки, удаления и изменения порядка элементов или компонентов, отображаемых в списке.

Вот пример применения переходов входа/выхода к v-for списку с использованием TransitionGroup

У приведенной выше демонстрации есть некоторые очевидные недостатки: когда элемент вставляется или удаляется, окружающие его элементы мгновенно «подпрыгивают» на место, а не перемещаются плавно. Мы можем исправить это, добавив несколько дополнительных правил CSS:

Теперь это выглядит намного лучше — даже анимация плавная, когда весь список перетасовывается

Взаимодействуя с переходами JavaScript через атрибуты данных, можно также расположить переходы в списке в шахматном порядке. Сначала мы визуализируем индекс элемента как атрибут данных элемента DOM:

Затем в хуках JavaScript мы анимируем элемент с задержкой на основе атрибута данных. В этом примере для выполнения анимации используется библиотека GreenSock :