Vue动画和自定义动画类名

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第11天，点击查看活动详情juejin.cn/post/714765… 指的是dom添加移除更新时的动态效果 动画

什么时候适合使用？

条件渲染(v-if)、条件展示(v-show)

两种实现动画的方式

• 一类是通过css3来实现过度动画
• 另一类是vue中专门添加了几个过度效果的钩子函数，在钩子函数中使用js直接操作dom。
• 可以配合使用第三方js动画库，如Velocity.js

vue中想使用动画，就需要用到<transtion/>组件. 用法：要把切换的组件作为它的子组件使用。

实现原理：

当插入或删除包含在transition组件中的元素，Vue将会做以下处理：

1. 它会先看是否应用css3的动画效果，如果是，就在恰当的时机添加/删除css类名。
2. 如果过度组件提供了js钩子函数，这些钩子函数将在恰当的时机被调用。
3. 如果没有找到js钩子并且也没有检测到css过渡/动画，DOM操作（插入/删除）在下一帧中立即执行。

过度的类名

1. v-enter 动画开始之前的状态
2. v-enter-active 进入时的动画效果
3. v-enter-to 动画结束时的样式
4. v-leave 离开之前的样式，大多数情况下，结束时与开始之前时一样的
5. v-leave-active 离开时的动画效果
6. v-leave-to 离开后的效果

自定义动画类名

如果页面中有很多组件有动画，那么可以给transition组件加name属性，然后把类名的v替换成我们自定义的name属性值。

自定义过渡类名

以下标记也都是给<Transition>组件的类名，与Animated库相结合时，第一个类名必须加上animate__animated，在加上我们想要的效果。

1. enter-class=""
2. enter-active-class=""
3. enter-to-class=""
4. leave-class=""=""
5. leave-cative-class=""
6. leave-to-class=""