引言

本文整理自个人一日的学习笔记，既是对个人知识的沉淀，也希望能对各位有所帮助

认知

按照我个人浅薄的理解，过渡&动画是指Dom元素进行切换时，进入和离开（隐藏）时应用的效果，使得进行切换时不那么突兀。接下来的内容也是基于这个认知展开

过渡拥有六个类名: （图片引自vue官方文档）

v-enter：进入（显示）开始时的状态
v-enter-active：进入(显示)过程中的状态
v-enter-to：进入(显示)结束时的状态
v-leave：离开(隐藏)开始时的状态
v-leave-active：离开(隐藏)过程中的状态
v-leave-to：离开(隐藏)结束时的状态若是transition组件没有定义name属性的话，v-就会是这些过渡类的默认前缀，如果定义了name属性，例如name='try',那么类名的定义将会变为try-enter。

CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。

vue官方团队为我们提供了通过attribute自定义过渡类名的方法

值得注意的是，自定义的类名优先级高于普通的类名，也就是说，这个设计为我们采用第三方的动画库提供了很大的便利。

这个动画库效果相对比较齐全，也比较知名，官方文档也较为贴心，安装教程完整。唯一值得一提的是

，应用时，类名中必须含有animate_animated，并且动画类的命名也要以animate_作为前缀

以上便是博主对于本知识点的理解和总结。