Переходы и анимация во Vue.js

Переходы и анимация во Vue.js

От автора: переходы – это не просто красивая добавка к приложению. Хороший переход можно вставить в регистрацию пользователя, совершение покупки или вообще уход с сайта. Например, Amazon выяснили, что каждые 100мс задержки стоят им 1% продаж.

Хороший переход может снизить риск ухода пользователя. Vue.js сильно упрощает добавление переходов и анимации в приложение. Все благодаря способу их обработки. Существует несколько способом, которыми реализуется во Vue js анимация приложения, в том числе CSS переходы и анимации, а также манипуляция DOM через JS во время перехода. Можно даже привязать сторонние библиотеки GSAP или VelocityJS.

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

Переходы или анимация

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

Переход – это когда элемент движется из точки А в В. У переходов всего 2 состояния: начальное состояние А и конечное В. Они отлично работают для таких вещей, как наведение курсора на ссылки и кнопки, добавление нового элемента в список. Основная цель перехода – создать естественную демонстрацию того, что что-то изменилось. Хороший пример перехода в реальной жизни – автоматические двери. Они начинают закрываться, и как только вы к ним подходите, они автоматически переходят в открытое состояние.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Пример простого перехода с домашней страницы Stripe.

Переходы и анимация во Vue.js

С другой стороны, анимация обладает множеством промежуточных состояний, которые называются keyframes. Анимация может идти из А в В в С в D и далее. Она отлично подходит для таких вещей, как спиннер загрузки или визуализатор аудио. Главная задача анимации – постоянно демонстрировать, что что-то изменяется. У анимаций могут быть конечные состояния, но они не ограничены двумя состояниями, в отличие от переходов. В реальности примером анимации будет джакузи. Оно постоянно находится в изменяющемся и завихряющемся состоянии, но оно может и закончиться.

Переходы и анимация во Vue.js

В некотором роде, анимации это просто супер переходы, так как у них больше промежуточных состояний. Переходы могут идти только из А в В, а анимации могут иметь сколько угодно много промежуточных состояний. Как только вы разберетесь с переходами, вам будет легко перепрыгнуть на анимации.

В этой статье мы поговорим исключительно про переходы, а также как создать переход при наведении курсора на меню из примера Stripe. Начнем с HTML:

<ul class="MenuPopover">
  <li>Payments</li>
  <li>Subscriptions</li>
  <li>Connect</li>
</ul>

Элемент transition

В Vue.js есть элемент-обертка transition, упрощающий обработку JS анимации, CSS анимации и CSS переходов на элементах и компонентах.

В случае с CSS переходами transition применяет и снимает классы. Вам лишь нужно задать, как элемент должен выглядеть во время перехода.

Он работает как любой другой компонент Vue.js. На элементе можно использовать те же самые директивы v-if и v-show. Мы можем обернуть всплывающий элемент меню в
и задать ему имя.

<transition name="menu-popover">
  <ul class="MenuPopover">
 <li>Payments</li>
 <li>Subscriptions</li>
 <li>Connect</li>
  </ul>
</transition>

Классы переходов

Элемент transition применяет 6 классов к разметке, которые можно использовать для раздельной обработки входа и выхода из переходов. Есть 3 класса для обработки перехода из А в В, когда элемент отображается, и другие 3 – для обработки перехода из А в В, когда элемент удаляется.

Входной переход осуществляется, когда компонент включается или отображается. Его классы v-enter, v-enter-active, v-enter-to

Выходной переход осуществляется, когда компонент отключается или удаляется. Его классы v-leave, v-leave-active и v-leave-to

При использовании тега transition без name по умолчанию ставится префикс v-. В нашем примере переход называется menu-popover, поэтому вместо класса v-enter у нас будет menu-popover-enter.

Входные переходы

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

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

v-enter – класс, указывающий на часть А перехода. Другими словами, это стартовые стили перехода.

v-enter-to – класс, указывающий на часть В или конечные стили перехода.

v-enter-active – класс, с помощью которого определяется переход от А к В. Здесь определяются длительность и функции смягчения.

menu-popover-enter

До наведения курсора стартовое состояние всплывающего меню невидимое. К нему применен легкий эффект трансформации rotateY, который его слегка переворачивает. Сам класс:

.menu-popover-enter {
  opacity: 0;
  transform: rotateY(50deg);
}

Переходы и анимация во Vue.js

menu-popover-enter-to

После наведения курсора на всплывающее меню его конечное состояние полностью видимое и без трансформаций. Конечный переход:

.menu-popover-enter-to {
  opacity: 1;
  transform: rotateY(0deg);
}

Переходы и анимация во Vue.js

menu-popover-enter-active

Здесь можно определить стили перехода. В примере Stripe переход довольно быстрый. Длительность составляет около 200мс, прозрачность и трансформация анимируются одновременно. Также присутствует легкая анимация ease-out.

Все это определяется в следующей анимации:

.menu-popover-enter-active {
  transition: opacity, transform 200ms ease-out;
}

Переходы и анимация во Vue.js

Выходной переход

Выходной переход всплывающего меню осуществляется, когда пользователь уводит курсор мыши с меню, и элемент transition скрывается. Это полностью отдельный переход от входного.

Легко создавайте обратные переходы

В 90% случаев выходной переход – это инверсия входного перехода, но все равно это отдельный переход. Один переход на появление на экране (наведение на меню курсора) и другой переход для ухода с экрана (когда курсор убирается с меню).

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

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

.menu-popover-enter,
.menu-popover-leave-to {
  opacity: 0;
  transform: rotateY(50deg);
}
.menu-popover-enter-to,
.menu-popover-leave {
  opacity: 1;
  transform: rotateY(0deg);
}
.menu-popover-enter-active,
.menu-popover-leave-active {
  transition: opacity, transform 200ms ease-out;
}

По основным принципам

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

Более подробно о том, как Vue обрабатывает CSS переходы и все сложности элемента transition читайте в transitions guide в документации Vue.js.

Автор: Derick Sozo

Источник: https://medium.com/

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

VUE JS. Быстрый старт

Практический курс по созданию веб-приложения на VUE JS с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree