Vue Предоставляет переходной компонент для реализации перехода компонентов и маршрутизации. Рациональное использование этого компонента может сделать наши страницы более гибкими и улучшать опыт пользователя.
концепция
При переходе входа/выхода будет 6 классов переключения, скопируйте официальную картинку
v-enter: определяет начальное состояние перехода входа. Вступает в силу до вставки элемента и удаляется в следующем кадре после вставки элемента.
v-enter-active: определяет состояние, когда переход ввода вступает в силу. Применяется на протяжении всего перехода входа, вступает в силу до вставки элемента и удаляется после завершения перехода/анимации. Этот класс можно использовать для определения времени процесса перехода входа, задержек и функций кривой.
v-enter-to: Версия 2.1.8 и выше Определяет конечное состояние перехода ввода. Вступает в силу в следующем кадре после вставки элемента (при одновременном удалении v-enter), удаляется после завершения перехода/анимации.
v-leave: определяет начальное состояние перехода выхода. Вступает в силу немедленно, когда запускается переход выхода, и удаляется в следующем кадре.
v-leave-active: определяет состояние, когда активен переход выхода. Применяется в течение всей фазы перехода при выходе, вступает в силу сразу после запуска перехода при выходе и удаляется после завершения перехода/анимации. Этот класс можно использовать для определения времени обработки, задержек и функций кривой для выходных переходов.
v-leave-to: Версия 2.1.8 и выше Определяет конечное состояние перехода выхода. Следующий кадр вступает в силу после того, как запущен переход leave (и одновременно удаляется v-leave), и удаляется после завершения перехода/анимации.
Это все еще выглядит немного грязно, давайте сначала посмотрим.
enter определяет начальное состояние, active определяет процесс, а enter определяет конец, но при фактическом движении есть пересечения. Через точки останова можно обнаружить, что
- добавить v-ввод
- добавить v-enter-active,
- удалить v-энтер
- добавить v-erter-to
- Удалите v-enter-to и v-enter-active
// transition: all 2s;
.move-enter {
margin-left: 0;
}
.move-enter-active {
margin-left: 100px;
}
.move-enter-to {
margin-left: 200px;
}
Например, в приведенном выше случае, как работает анимация перехода?
Здесь следует отметить два момента.
- enter-active перезаписывает начальную точку ввода
- Всего после двух переходов enter-to запускается после завершения active, поэтому на четвертой секунде он возвращается на позицию самого элемента dom.
Таким образом, официальный документ также использует v-enter для определения начальной позиции и управления эффектом в enter-active.
Используйте класс для достижения эффекта перехода
Помимо этих 6 классов, для достижения нужного нам эффекта можно использовать переход или анимацию. Например, здесь мы напрямую определяем эффект перехода для всех изменений маршрутизации,
Свойство появления указывает, что анимация также применяется при первой загрузке страницы.
<transition appear name="move">
<router-view></router-view>
</transition>
@keyframes animationIn {
0% {
transform: translate(-100%, 0);
}
100% {
transform: translate(0, 0);
}
}
@keyframes animationOut {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(100%, 0);
}
}
.move-enter {
transform: translate(-100%, 0);
position: absolute!important;
z-index: 999;
top: 0;
left: 0;
width: 100%;
}
.move-enter-active {
animation: animationIn 0.2s;
position: absolute!important; // 进入的组件要覆盖掉移除的组件，参考 //https://cn.vuejs.org/v2/guide/transitions.html#%E8%BF%87%E6%B8%A1%E6%A8%A1%E5%BC%8F
z-index: 999;
top: 0;
left: 0;
width: 100%;
}
.move-leave {
transform: translate(0, 0);
}
.move-leave-active {
animation: animationOut 0.2s;
}
Эффект
Хуки JavaScript
Эти хуки можно использовать в сочетании с переходами/анимациями CSS.
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<!-- ... -->
</transition>
В этих хуках можно использовать другие сторонние библиотеки, el в обратном вызове будет настоящим элементом dom Например, здесь мы используем официально рекомендованную Velocity.js в качестве библиотеки анимации.
<div class="main">
<transition name="showRect" appear
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter"
@before-leave="handleBeforeLeave"
@leave="handleLeave"
@after-leave="handleAfterLeave"
:css="false">
<div class="box" v-if="show"></div>
</transition>
</div>
<button @click="start">切换</button>
methods: {
start() {
this.show = !this.show
},
handleBeforeEnter: function (el) {
el.style.opacity = 0;
console.log('方块显示动画即将执行');
},
handleEnter: function (el, done) {
Velocity(el, 'stop');
Velocity(el, {
backgroundColor: '#0085eb',
opacity: 1,
translateX: 260,
rotateZ: ['360deg', 0]
}, {
duration: 1000,
easing: [ 0.4, 0.01, 0.165, 0.99 ],
complete: done
});
console.log('方块显示动画执行中...');
},
handleAfterEnter: function (el) {
console.log('方块显示动画结束');
},
handleBeforeLeave: function (el) {
console.log('方块隐藏动画即将执行');
},
handleLeave: function (el, done) {
Velocity(el, 'stop');
Velocity(el, {
backgroundColor: '#4dd0e1',
opacity: 0,
translateX: 0,
rotateZ: [0, '360deg']
}, {
duration: 1000,
easing: [ 0.4, 0.01, 0.165, 0.99 ],
complete: done
});
console.log('方块隐藏动画执行中...');
},
handleAfterLeave: function (el) {
console.log('方块隐藏动画结束');
}
}
переход списка
Vue также предоставляет компонент группы переходов в качестве контейнера для переходов списка.
В отличие от , он будет отображаться как реальный элемент: по умолчанию. Вы также можете заменить другими элементами через атрибут тега
У группы перехода есть специальный атрибут v-move, который будет применяться в процессе изменения положения элемента.Пожалуйста, обратитесь к официальному сайту за эффектом.
Другие не будут копировать официальный сайт
В переходе по списку вы можете комбинировать js-хуки для достижения некоторых специальных эффектов.
взять каштан
<template>
<div>
<div class="btn" @click="addItem">添加</div>
<div class="btn" @click="sort">排序</div>
<div class="box">
<div class="item-bar">
<transition-group name="fade" tag="p" appear
v-on:before-enter="beforeEnter"
v-on:after-enter="afterEnter">
// 这里的data-index 是一个识别标识， 便于在js钩子中获得当前元素的序号
<div class="item" v-for="(i, index) in list" :key="i" :data-index="index">{{i}}</div>
</transition-group>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
name: "home",
data() {
return {
show: true,
list: [5,4,3,2,1],
nextNum: 6
};
},
methods: {
showDom() {
this.show = !this.show
},
beforeEnter: function (el: any) {
el.style.opacity = 0 // 每个元素插入之前， 透明度为0
let index = el.dataset.index 每次可能插入多个元素，
// 页面加载时先展示5个
if (index < 5) {
//设置动画延迟， 实现按续插入的效果
el.style.animationDelay = el.dataset.index * 0.3 + 's'
}
},
afterEnter: function (el) {
el.style.opacity = 1
console.log('afterEnter')
},
addItem() {
this.list.push(this.nextNum++)
},
sort() {
this.list = this.list.sort((a, b) => a -b)
}
}
});
</script>
@keyframes animat {
0% {
margin-left: 300px;
opacity: 0;
}
100% {
margin-left: 0;
opacity: 1;
}
}
.fade-enter {
opacity: 0;
margin-left: 300px;
}
.fade-enter-active {
opacity: 0;
animation: animat 1s;
}
.fade-enter-to {
opacity: 1;
margin-left: 0;
}
.fade-move {
transition: all 0.3s;
}
.fade-leave {
left: 10px;
}
.fade-leave-active {
transition: all 2s ease-out;
}
.fade-leave-to {
left: -100%;
}
Эффект
выше~