过渡与动画

Vue封装的过度与动画：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名

写法

1. 准备好样式
   ○元素进入的样式
   ⅰ. v-enter 进入的起点
   ⅱ. v-enter-active 进入过程中
   ⅲ. v-enter-to 进入的终点
   ○ 元素离开的样式
   ⅰ. v-leave 离开的起点
   ⅱ. v-leave-active 离开过程中
   ⅲ. v-leave-to 离开的终点

2. 使用<transition>包裹要过度的元素，并配置name属性，此时需要将上面样式名的v换为name

3. 要让页面一开始就显示动画，需要添加appear

   <transition name="hello" appear>
     <h1 v-show="isShow">你好啊！</h1>
   </transition>
   
   <style>
     .hello-enter-active{
       animation: hello 0.5s linear;
     }
   
     .hello-leave-active{
       animation: hello 0.5s linear reverse;
     }
   
     @keyframes hello {
       from{
         transform: translateX(-100%);
       }
       to{
         transform: translateX(0px);
       }
     }
   </style>
   

   4. 备注：若有多个元素需要过度，则需要使用<transition-group>，且每个元素都要指定key值

      <transition-group name="hello" appear>
        <h1 v-show="!isShow" key="1">你好啊！</h1>
        <h1 v-show="isShow" key="2">尚硅谷！</h1>
      </transition-group>