第四章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作为组件模板结构，在其内部通过插槽的方式编写列表结构。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/147493.html
