第四章Vue过渡和动画[简易总结]

第四章Vue过渡和动画

transition组件的使用标签中用来放置需要添加过渡的div元素，使用name属性可以设置前缀，自定义类名结合第三方CSS库animate.css实现动画，appear初始渲染动画，用@keyframes创建CSS动画，钩子函数实现动画和结合Velocity.js实现动画。
@keyframes和animate.css的区别在于动画中v-enter类名在节点插入DOM后不会立即删除，而在animationend事件触发时删除。

多个元素过渡:

1.不同标签名元素可以使用v-if和v-else来进行过渡。    
2.相同标签过渡，需要通过key特性设置唯一值来标记。    
3.过渡模式，在transition中加入mode属性，它有两个值，out-in和in-out。

多个组件过渡

不需要使用key特性，使用动态组件通过Vue中的元素绑定is属性来实现多组件过渡。

列表过渡。

需要使用v-if和transition-group组件来实现。

1.列表的进入离开过渡通过name属性自定义CSS类名前缀。
2.为了实现平滑过渡，可以借助v-move特性。
3.列表的交错过渡通过data属性与JavaScript通信来实现。
4.可复用的过渡组件，需要将transition或者transition-group作为组件模板结构，在其内部通过插槽的方式编写列表结构。