vue过渡和动画总结

vue官网一共介绍了以下几种过渡：

1，单元素消失和显示之间切换的过渡

1）单个节点

2）同一时间渲染多个节点中的一个

3）利用css transition实现过渡，结合class 切换

4）利用css animation实现动画，结合class 切换

5）自定义过渡的类名可以使用第三方的库实现过渡：比如使用animation.css

2，状态过渡

状态过渡没有使用vue内置的transition组件

3，列表过渡

列表过渡使用的是transition-group这个内置组件。transition-group与transition不同在于它会以一个真实元素呈现：默认为一个 span。你也可以通过 tag attribute 更换为其他元素

1）列表的排序过渡：利用transition-group不仅可以进入和离开动画，还可以改变定位

2）列表的交错过渡：利用钩子函数实现的过渡

4，初始渲染的过渡

初始渲染的过渡是刚渲染时候有过渡，之后就不在有过渡，使用appear标识

5，过渡模式

一个离开过渡的时候另一个开始进入过渡。适合解决同一时间渲染多个节点中的一个。过渡模式无法应用在列表过渡中