Vue复习：transition动画对于复用组件动画添加失败的解决办法

1、transition过渡

Vue在插入、更新或者移除DOM时，提供了多种不同的方式的应用过渡效果

1.1、单个元素的过渡

通过添加一些CSS动画或者直接使用animate.css动画库即可

1.2、多个元素的过渡

多个元素的过渡切换存在两种情况发生，一种是这些元素是不同的，不同的组件或是不同的标签元素，这种就很好处理，直接写在transition内部即可
但是针对相同组件或者相同的标签元素切换时，就需要通过key的特性设置唯一的值来标记，让Vue能够区分他们是不同的，否则没有元素的销毁与创建的过程，在Vue中是直接进行复用了，也就是说，直接在组件或元素的内部单纯的将数据更新，重新渲染视图，这样动画添加则会失败。
1、不加key值的情况：

    
测试Animate.css动画库的动画效果
    
测试同名组件或者标签动画

未加key值的动画.gif

可以看出，虽然是两个不同的p标签元素，以及内容也不一样，但是在渲染时，此时的p标签DOM并未发生重新生成，所以动画是没有的。
2、添加key值的情况：

    
测试Animate.css动画库的动画效果
    
测试同名组件或者标签动画

添加key值的动画.gif

上图可以看出来，虽然是实现了动画效果的追加，但是貌似动画效果是同一时间触发的这个问题也就导致了动画效果有点冲突，样式的重叠。

1.3、解决动画效果同一时间触发的问题

像上述的gif动图，在key值为1的标签leave的过程中，key值为2的标签就触发了enter操作，那么在key为2的标签一进去的时候，上面那个元素还是处于占位的状态，因此，这时，就需要加入一个模式mode属性，来决定元素的出场顺序。
mode属性：
mode属性共有两种状态，一是out-in，另外一种是in-out，字面意思上的理解就是这两种模式的理解：一种是先离场再进场，一种是先进场再离场
示例：

添加mode.gif

这样添加transition动画的一系列的问题大概分析清楚了，就可以很好的去做需要做的动画效果了。