От автора: переходы – это не просто красивая добавка к приложению. Хороший переход можно вставить в регистрацию пользователя, совершение покупки или вообще уход с сайта. Например, Amazon выяснили, что каждые 100мс задержки стоят им 1% продаж.
Хороший переход может снизить риск ухода пользователя. Vue.js сильно упрощает добавление переходов и анимации в приложение. Все благодаря способу их обработки. Существует несколько способом, которыми реализуется во Vue js анимация приложения, в том числе CSS переходы и анимации, а также манипуляция DOM через JS во время перехода. Можно даже привязать сторонние библиотеки GSAP или VelocityJS.
В этой статье мы поговорим об основных моментах того, как Vue.js обрабатывает CSS переходы. Зная это, вы сможете создавать свои переходы. После получения базового представления можно быстро перейти к изучению все мощи переходов Vue и анимации.
Переходы или анимация
Прежде чем продолжить, давайте узнаем, чем отличаются переходы от анимации.
Переход – это когда элемент движется из точки А в В. У переходов всего 2 состояния: начальное состояние А и конечное В. Они отлично работают для таких вещей, как наведение курсора на ссылки и кнопки, добавление нового элемента в список. Основная цель перехода – создать естественную демонстрацию того, что что-то изменилось. Хороший пример перехода в реальной жизни – автоматические двери. Они начинают закрываться, и как только вы к ним подходите, они автоматически переходят в открытое состояние.
Пример простого перехода с домашней страницы Stripe.
С другой стороны, анимация обладает множеством промежуточных состояний, которые называются keyframes. Анимация может идти из А в В в С в D и далее. Она отлично подходит для таких вещей, как спиннер загрузки или визуализатор аудио. Главная задача анимации – постоянно демонстрировать, что что-то изменяется. У анимаций могут быть конечные состояния, но они не ограничены двумя состояниями, в отличие от переходов. В реальности примером анимации будет джакузи. Оно постоянно находится в изменяющемся и завихряющемся состоянии, но оно может и закончиться.
В некотором роде, анимации это просто супер переходы, так как у них больше промежуточных состояний. Переходы могут идти только из А в В, а анимации могут иметь сколько угодно много промежуточных состояний. Как только вы разберетесь с переходами, вам будет легко перепрыгнуть на анимации.
В этой статье мы поговорим исключительно про переходы, а также как создать переход при наведении курсора на меню из примера 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.
Входные переходы
Для всплывающего меню входным переходом считается момент, когда пользователь первый раз наводит курсор на меню.
v-enter – класс, указывающий на часть А перехода. Другими словами, это стартовые стили перехода.
v-enter-to – класс, указывающий на часть В или конечные стили перехода.
v-enter-active – класс, с помощью которого определяется переход от А к В. Здесь определяются длительность и функции смягчения.
menu-popover-enter
До наведения курсора стартовое состояние всплывающего меню невидимое. К нему применен легкий эффект трансформации rotateY, который его слегка переворачивает. Сам класс:
.menu-popover-enter { opacity: 0; transform: rotateY(50deg);
}
menu-popover-enter-to
После наведения курсора на всплывающее меню его конечное состояние полностью видимое и без трансформаций. Конечный переход:
.menu-popover-enter-to { opacity: 1; transform: rotateY(0deg);
}
menu-popover-enter-active
Здесь можно определить стили перехода. В примере Stripe переход довольно быстрый. Длительность составляет около 200мс, прозрачность и трансформация анимируются одновременно. Также присутствует легкая анимация ease-out.
Все это определяется в следующей анимации:
.menu-popover-enter-active { transition: opacity, transform 200ms ease-out;
}
Выходной переход
Выходной переход всплывающего меню осуществляется, когда пользователь уводит курсор мыши с меню, и элемент 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.
