# 简单总结Vue进入↗离开过渡&动画
# css过渡
一般只需要设置两个：
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
// 进入动画
.fade-enter-active {
transition: all .3s ease;
}
// 离开动画
.fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
// 初始状态
.fade-enter, .fade-leave-to {
transform: translateX(10px);
opacity: 0;
}
# css动画
// 进入时动画
.bounce-enter-active {
animation: bounce .5s;
}
// 离开时动画
.bounce-leave-active {
animation: bounce .5s reverse;
}
// 设置动画名称，初始样式，完结样式
@keyframes bounce {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
# 自定义过渡的类名
使用第三方css插件：Animate.css
<transition enter-active-class="animated zoomIn" leave-active-class="animated zoomOut" :duration="{ enter: 200, leave: 400 }">
</transition>
# 初始渲染时的过渡
可以通过 appear 属性设置节点在初始渲染的过渡。
<transition appear appear-class="custom-appear-class" 载入开始样式 appear-to-class="custom-appear-to-class" 载入结束样式(2.1.8+) appear-active-class="custom-appear-active-class" 载入过程动画>
<!-- ... -->
</transition>
# 过渡模式
in-out：新元素先进行过渡，完成之后当前元素过渡离开。
out-in：当前元素先进行过渡，完成之后新元素过渡进入。
<transition name="fade" mode="out-in">
<!-- ... -->
</transition>
# 列表过渡
使用 <transition-group> 组件。
# 进入/离开过渡
<transition-group name="list">
<span v-for="item in items" v-bind:key="item" class="list-item">{{ item }}</span>
</transition-group>
# 排序过渡
只需了解新增的 v-move属性，它会在元素的改变定位的过程中应用。
像之前的类名一样，可以通过 name 属性来自定义前缀，也可以通过 move-class 属性手动设置。
- 默认方式
<transition>
<!--...-->
</transition>
//css
.v-move {
transition: all 1s;
}
- 通过
name属性来自定义前缀
<transition-group name="flip-list" tag="ul">
<li v-for="item in items" v-bind:key="item">{{ item }}</li>
</transition-group>
// css
.flip-list-move {
transition: transform 1s;
}
move-class属性
略