vue 多元素过渡+动画封装

首先介绍下如何实现多元素过渡
（1）利用条件编译指令v-if与v-else实现多元素内容切换.

（2）接下来在内容切换基础上，添加过渡动画，例如渐隐渐现效果
1、transition添加name属性命名
2、设置过渡状态

（3）状态管理
测试后发现并没有过渡效果，分析原因Vue在多个元素切换过程中会尽量复用DOM，如果不加key，那么vue会选择复用节点(Vue的就地更新策略)，导致之前节点的状态被保留下来，由此产生一系列的bug.。
方案：给多元素添加不同key进行状态管理，代码如下

多元素过渡可以通过v-if条件指令进行控制

多元素过渡-案例

点击验证后发现，在过渡过程中area区域被重绘了，一个离开过渡的时候另一个开始进入过渡。
这是 的默认行为 - 即进入和离开同时发生。

方案：在元素绝对定位时候运行正常：

也可以给元素加上转换属性，实现滑动过渡的效果

同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了两种过渡模式。
①in-out：新元素先进行过渡，完成之后当前元素过渡离开（不是经常用到，但对于一些稍微不同的过渡效果还是有用的）

②out-in：当前元素先进行过渡，完成之后新元素过渡进入

【多组件过渡】

接下来介绍下多组件实现过渡效果，代码如下，直接将多元素修改为多组件即可
多组件过渡也可以结合动态组件进行操作，首先写个基础动态组件案例，如下所示

接下来添加transition过渡

列表过渡

目前为止，仅仅实现了单个&&多个元素、单个&&多个组件的过渡动画，接下来介绍下针对列表增删时做的一些过渡动画操作。

（1）首先将基础架构搭建好，要求点击按钮时添加新内容到列表尾部

（2）目前为止已经实现点击添加效果，如下所示

之前的一些过渡动画效果都是针对单个元素组件的隐藏展示，或者多个元素组件来回切换的动画效果，接下来介绍下列表过渡效果，即列表增删改动数据时的过渡动画。

（2）定义CSS过渡效果

此时再次点击便实现了列表过渡切换效果

动画封装

前言
如果部分效果在页面里应用较多，可以对其进行动画封装，以方便日后调用
步骤：
（1）首先创建基础动画，即简单的显隐切换动画，如下所示

（2）封装动画组件

这里使用了props传值&&slot插槽

（3）调用组件
组件内部为了响应slot插槽，所以需要填入对应DOM元素，同时传入参数

目前为止已经实现了对动画的封装，可以任意次调用，如下所示

（4）改良版—JS动画
动画的封装不仅可以使用CSS实现，同时也可以借助动画钩子，使用JS实现动画效果。
即将如下的CSS动画代码也封装到组件里