vue transition动画

<template>
 　 <button @click="openClick">开关</button>
　　<transition name="fade">
　　　　<div v-if="show" class="open-more"> 动画内容</div>
　　</transition>
</template>

<style >
  .fade-enter {
      opacity: 0;
      color: rgb(232, 6, 6);
  }
  .fade-enter-active {
      transition: all 2s;
  }
  .fade-enter-to {
      color: rgb(10, 58, 171);
      opacity: 1
  }

  .fade-leave {
      opacity: 1;
      color: rgb(232, 6, 232);
  }
  .fade-leave-active {
      transition: all 2s;
  }
  .fade-leave-to {
      color: rgb(42, 171, 10);
      opacity: 0
  }
</style>

动画主要通过6个类名来控制

进入（显示，创建）

v-enter 进入前 （vue3.0 v-enter-from）

v-enter-active 进入中

v-enter-to 进入后

离开（隐藏，移除）

v-leave 离开前 （vue3.0 v-leave-from）

v-leave-active 离开中

v-leave-to 离开后