vue.js — анимации

Анимирование элементов в vue:

Элемент оборачиваем в компонент transition , при этом указываем ему name:

<transition name=»textShow»>
<div v-if=»show» class=»text»>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe illum ullam eius aliquid praesentium quasi tempore vero quia ipsam officiis? Quisquam ullam tempora corporis. Non reprehenderit, perspiciatis cumque praesentium dolorem.</div>
</transition>

При этом имеем ввиду что внутри transition  может быть 1 элемент.

 

Далее используем имя анимации как перфикс для наложения стилей:

.textShow-enter{
transform: scale(.4);
opacity: 0;
}
.textShow-enter-active{
transform: scale(.6);
transition: all 2s;
opacity: .6;
}
.textShow-enter-to{
transform: scale(1);
opacity: 1;
}
.textShow-leave{
transform: scale(1);
opacity: 1;
}
.textShow-leave-active{
animation: textShowOut 2s ease forwards;
transform: scale(.6);
transition: all .3s;
opacity: .6;
}
.textShow-leave-to{
transform: scale(.4);
opacity: 0;
}
@keyframes textShowOut{
0%{
transform: scale(1);
opacity: 1;
}
100%{
transform: scale(.4);
opacity: 0;
}
}

 

При этом брейкпоинты анимаций:

-enter — стили при инициализации

-enter-active — стили после инициализации

-enter-to — конечный результат анимации

-leave начало отмены анимации

-leave-active — после начала отмены

-leave-to — конец анимации

 

Сделано все так что, для того чтобы анимация исчезновения была плавной необходимо указать анимацию css:

@keyframes textShowOut{
0%{
transform: scale(1);
opacity: 1;
}
100%{
transform: scale(.4);
opacity: 0;
}
}

И указать данную анимацию в -leave-active.

 

Также бывают моменты когда в -leave-active есть анимация и transition одновременно, и продолжительность у данных атрибутов разная, в таком случае vue.js будет первой запускать анимацию с большей продолжительностью. Есди надо это поведение исправить то вешаем на компонент transition type равный приоритетному атрибуту например:

<transition name=»textShow» type=»animation»>

или

<transition name=»textShow» type=»transition»>

 

Также есть параметр duration отвечающий за продолжительность анимаций, и параметр appear , который запускает анимацию если страницу перезагрузили.

 

Взаимодействие с другими библиотеками

Анимация в vue.js реализована с умом, и вам не составит труда добавить сторонние css фреймворки анимаций в свой проект. Например animate.css.

Компонент transition может принимать классы при начале и конце анимации. Например:

<transition enter-active-class=»animated fadeInLeft»>

<transition enter-leave-class=»animated fadeInRight»>

 

Мод анимации

<transition name=»textShow» mode=»out-in»>
<p v-if=»show» key=»one»>Включить</p>
<p v-else key=»two»>Выключить</p>
</transition>

 

В данном примере, при выполнении условия  show = false, сначала появиться второй элемент, а затем исчезнет первый, приэтом визуально будет смотреться не очень. Для того чтобы второй элемент появлялся после первого, используем мод анимации — mode=»out-in» .  Также есть мод — in-out.

 

События анимаций

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

<transition

@before-enter=»beforeEnter»

@enter=»Enter»

@after-enter=»afterEnter»

@enter-canselled=»enterCancelled»>

Также 4 с leave :

@before-leave=»beforeLeave»

Обработать данные события можно в methods:

methods:{
beforeEnter(el){
window.console.log(el);
}
}

 

Также в событиях enter и leave должны в конце стоять done(), иначе анимация будет вести себя не правильно, не прекращаясь.

methods:{
Enter(el){
window.console.log(el);

done();
}
}