多动画的先后顺序和动态组件的切换

1、多个元素之间切换动画

多元素过渡，就是利用v-if或者v-show等指令，切换元素的显示，需要显示的元素就会有入场动画，需要隐藏的就有出场动画。

1.1、注意事项

在vue中存在着dom复用的机制，就是为了提升效率，在两个相同的div标签中，如果不加key，只会看到单纯的内容改变，样式不会发生任何变化。
1、当有相同标签名的元素切换时，需要通过key属性设置唯一的值来标记以让Vue区分它们
2、key属性的用处：主要是为了不让dom元素复用
3、DOM元素复用是Vue提升性能的手段，但是因为DOM元素复用，因而会导致没有任何动画效果
4、设置key属性不让它复用

动画.gif

2、设置动画的出场先后顺序

默认的是出场和入场的动画先后是同时进行的！同时生效的进入和离开的过渡不能满足所有要求，因此Vue提供了过渡模式。
1、Vue在transition标签上提供了一个mode属性，来设置出场入场动画的先后顺序
2、mode的属性值为in-out，则为先执行入场动画，等入场动画执行完毕后再执行出场动画
3、mode属性值为out-in，则先执行出场动画，再执行入场动画

动画切换.gif

3、Vue中组件之间的动画

3.1、不利用动态组件

动画组件.gif

3.2、利用动态组件切换

动态组件.gif

4、Vue中的列表过渡

对于过渡有如下：
1、单个节点
2、同一时间渲染多个节点中的一个
如何同时渲染整个列表，达到同等的v-for效果，这个时候就要使用组件
特点：
1、标签会以一个真实的元素呈现，默认的是。也可以通过tag属性，更换为其他元素
2、过渡模式不可用（上面说到的mode），因为我们不再相互切换特定的元素
3、内部元素总是需要提供唯一的key属性值
4、CSS过渡的类将会应用在内部的元素中，而不是这个容器本身

4.1、使用标签嵌套

transition-group.gif

4.2、transition-group原理

transition-group原理实际上就是给每一个列表循环的单独的元素外套一层transition标签，实际上就是单个元素的过渡动画。
v-for使用注意：for循环的时候key值尽量不要使用index索引，会导致性能降低，其次项目功能上也会造成一定的影响，如果能不用index作为key值，尽量不要使用index作为key值。

5、封装Vue动画

利用组件和slot的方式，将动画可以封装为一个组件，这样可以通过调用的方式复用相同的动画

5.1、封装动画（目前处于学习阶段：只是简单的封装）

5.2、使用封装的动画组件

5.3、展示效果

动画组件封装.gif