vue transition注意事项

使用vue transition时的注意事项

1. 单个元素时使用<transition></transition>标签，多个元素时使用<transition-group></transition-group>标签，使用<transition-group></transition-group>标签时必须为每一个元素添加key。

2. transition就是过渡的意思，transition组件就是用于元素从一个状态到另外一个状态的过渡效果

3. transition组件会在特定的阶段为包裹住的元素添加class，通过在特定的class上设定不同的状态完成过渡效果。下面是过渡时六个class被添加的时间
   .v-enter：元素的初始状态（过渡从开始到结束嘛，v-enter就是过渡还未开始的状态）
   .v-enter-to：过渡完成后的状态，在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
   v-enter-active和v-leave-active：定义进入过渡生效时的状态。即在这设置两个状态间的变化效果和变化时间。也可以运用关键帧技术
   v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
   v-leave-to：离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

4. transition最麻烦的就是设置上面六个class的状态效果了，如果你做的过渡效果死活不起效或者行为怪异，那八成就是各个状态的class的设置问题了。着重检查

5. name属性修改的是class的名字，默认是v，即如果你没改name属性，添加的class是v-enter，如果设置name=“fade”,则添加的class就是.fade-enter

参考文档：https://cn.vuejs.org/v2/guide/transitions.html