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

<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动画的一系列的问题大概分析清楚了，就可以很好的去做需要做的动画效果了。