1、transition过渡
Vue在插入、更新或者移除DOM时，提供了多种不同的方式的应用过渡效果
1.1、单个元素的过渡
通过添加一些CSS动画或者直接使用animate.css动画库即可
1.2、多个元素的过渡
多个元素的过渡切换存在两种情况发生，一种是这些元素是不同的，不同的组件或是不同的标签元素，这种就很好处理，直接写在transition内部即可
但是针对相同组件或者相同的标签元素切换时，就需要通过key的特性设置唯一的值来标记，让Vue能够区分他们是不同的，否则没有元素的销毁与创建的过程，在Vue中是直接进行复用了，也就是说，直接在组件或元素的内部单纯的将数据更新，重新渲染视图，这样动画添加则会失败。
1、不加key值的情况：
<transition
name="custom-classes-transition"
enter-active-class="animated slideInLeft"
leave-active-class="animated slideOutRight">
<p v-if="isShow">测试Animate.css动画库的动画效果</p>
<p v-else>测试同名组件或者标签动画</p>
</transition>
未加key值的动画.gif
可以看出，虽然是两个不同的p标签元素，以及内容也不一样，但是在渲染时，此时的p标签DOM并未发生重新生成，所以动画是没有的。
2、添加key值的情况：
<transition
name="custom-classes-transition"
enter-active-class="animated slideInLeft"
leave-active-class="animated slideOutRight">
<p v-if="isShow" :key="1">测试Animate.css动画库的动画效果</p>
<p v-else :key="2">测试同名组件或者标签动画</p>
</transition>
添加key值的动画.gif
上图可以看出来，虽然是实现了动画效果的追加，但是貌似
动画效果是同一时间触发的这个问题也就导致了动画效果有点冲突，样式的重叠。
1.3、解决动画效果同一时间触发的问题
像上述的gif动图，在key值为1的标签leave的过程中，key值为2的标签就触发了enter操作，那么在key为2的标签一进去的时候，上面那个元素还是处于占位的状态，因此，这时，就需要加入一个模式mode属性，来决定元素的出场顺序。
mode属性：
mode属性共有两种状态，一是out-in，另外一种是in-out，字面意思上的理解就是这两种模式的理解：一种是先离场再进场，一种是先进场再离场
示例：
<template>
<div id="demo">
<button @click="isShow = !isShow">click</button><br />
<transition name="myfade" mode="out-in">
<div v-if="isShow" :key="1">测试Animate.css动画库的动画效果</div>
<div v-else :key="2">测试同名组件或者标签动画</div>
</transition>
</div>
</template>
<script>
export default {
name: "demo",
data() {
return {
isShow: true,
};
},
};
</script>
<style scoped>
/* 效果过程 */
.myfade-enter-active,
.myfade-leave-active {
transition: all 0.8s linear;
}
/* 进场的瞬间与离场的效果添加 */
.myfade-enter,
.myfade-leave-to {
opacity: 0;
transform: translateX(200px);
}
</style>
添加mode.gif
这样添加transition动画的一系列的问题大概分析清楚了，就可以很好的去做需要做的动画效果了。
