过渡&动画

Posted on | In | | 次阅读

进入/离开 & 列表过渡

插入、更新或者移除DOM

transition封装组件，添加离开过渡

v-if
v-show
动态组件
组件根节点
（自动嗅探）是否应用CSS过渡或者动画
判断是否提供了JS钩子函数
（否则）DOM插入/删除，在下一帧立即执行

不同过渡的类名 有6个Class切换

CSS过渡

1
2
3
4
<transition name="slide-fade">   (html)
.slide-fade-enter-active {
	transition:all .3s ease      (css)
}

CSS动画

在animationd事件触发时删除
html不变
css中transition换为animation

自定义过渡的类名 e.g Animation css

.enter-class
.enter-active-class
……