Vue2简单动画效果

1、使用transition标签+动画实现

• transition标签

  1. 使用动画（@keyframes）实现

     <template>
       <div>
         <button @click="isShow = !isShow">显示/隐藏</button>
         <!-- 
           将需要使用动画的标签使用transition标签进行包裹，vue会自动执行动画
           使用transition需注意：
             1、动画执行的class类名需使用规定的类名
             2、默认类名为v-enter-active/v-leave-active
             3、如果给transition标签加上name属性，将默认类名中的v替换为name的值，即xxx-enter-active/xxx-leave-active
             4、appear属性，初始加载时自动执行一次动画
           本例中isShow为false时执行的类名为isShow-enter-active
           本例中isShow为true时执行时类名为isShow-leave-active  
          -->
         <transition name="isShow" appear>
           <div class="box" v-show="isShow">
             <span>11111</span>
           </div>
         </transition>
     
       </div>
     </template>
     
     <script>
     export default {
       name: 'bus',
       data() {
         return {
           isShow: true
         }
       },
     }
     </script>
     
     <style scoped>
     .box {
       height: 100px;
       display: flex;
       justify-content: center;
       align-items: center;
       color: #fff;
       background: #000;
     }
     
     /* 隐藏 */
     .isShow-enter-active {
       /* 执行from向左移动百分百 */
       animation: hidden 3s;
     }
     
     /* 显示 */
     .isShow-leave-active {
       /* 执行to向右移动百分百 */
       animation: hidden 3s reverse;
     }
     
     /* 动画 */
     @keyframes hidden {
       from {
         transform: translateX(-100%);
       }
       
       to {
         transform: translateX(0);
       }
     }
     </style>
     

     

  2. 使用过度实现

     <template>
       <div>
         <button @click="isShow = !isShow">显示/隐藏</button>
         <transition name="isShow" appear>
           <div class="box" v-show="isShow">
             <span>11111</span>
           </div>
         </transition>
     
       </div>
     </template>
     
     <script>
     export default {
       name: 'bus',
       data() {
         return {
           isShow: true
         }
       },
     }
     </script>
     
     <style scoped>
     .box {
       height: 100px;
       display: flex;
       justify-content: center;
       align-items: center;
       color: #fff;
       background: #000;
       /* transition: 4s linear; */
     }
     /* 进入的起点、离开的终点 */
     .isShow-enter,.isShow-leave-to {
       transform: translateX(-100%);
     }
     
     /* 时间、过度效果 */
     .isShow-enter-active,.isShow-leave-active{
       transition: 4s linear;
     }
     
     /* 进入的终点、离开的起点 */
     .isShow-enter-to,.isShow-leave {
       transform: translateX(0);
     }
     
     /* 进入的起点
     .isShow-enter {
       transform: translateX(-100%);
     }
     
     进入的终点
     .isShow-enter-to {
       transform: translateX(0);
     }
     
     离开的起点
     .isShow-leave {
       transform: translateX(0);
     }
     
     离开的终点
     .isShow-leave-to {
       transform: translateX(-100%);
     } */
     </style>
     

     • 多个元素过度使用transition-group

       注意：transition-group需要配合key使用

       <template>
         <div>
           <button @click="isShow = !isShow">显示/隐藏</button>
           <transition-group name="isShow" appear>
             <div class="box" v-show="!isShow" key="1">
               <span>11111</span>
             </div>
             <div class="box" v-show="isShow" key="2">
               <span>11111</span>
             </div>
           </transition-group>
       
         </div>
       </template>
       
       <script>
       export default {
         name: 'bus',
         data() {
           return {
             isShow: true
           }
         },
       }
       </script>
       
       <style scoped>
       .box {
         height: 100px;
         display: flex;
         justify-content: center;
         align-items: center;
         color: #fff;
         background: #000;
         /* transition: 4s linear; */
       }
       /* 进入的起点、离开的终点 */
       .isShow-enter,.isShow-leave-to {
         transform: translateX(-100%);
       }
       
       /* 时间、过度效果 */
       .isShow-enter-active,.isShow-leave-active{
         transition: 4s linear;
       }
       
       /* 进入的终点、离开的起点 */
       .isShow-enter-to,.isShow-leave {
         transform: translateX(0);
       }
       
       /* 进入的起点
       .isShow-enter {
         transform: translateX(-100%);
       }
       
       进入的终点
       .isShow-enter-to {
         transform: translateX(0);
       }
       
       离开的起点
       .isShow-leave {
         transform: translateX(0);
       }
       
       离开的终点
       .isShow-leave-to {
         transform: translateX(-100%);
       } */
       </style>
       

       

2、使用transition标签+集成第三方动画实现

本例使用第三方库为：animate.css

• 安装：npm install animate.css --save/yarn add animate.css

• 引入：import ‘animate.css’;

• 使用：

  <template>
    <div>
      <button @click="isShow = !isShow">显示/隐藏</button>
      <!-- 
        enter-active-class：进入动画样式
        leave-active-class：离开动画 样式
      -->
      <transition-group
       appear
       name="animate__animated animate__bounce" 
       enter-active-class="animate__fadeInUp"
       leave-active-class="animate__fadeOutUp"     
      >
        <div class="box" v-show="!isShow" key="1">
          <span>11111</span>
        </div>
        
      </transition-group>
  
    </div>
  </template>
  
  <script>
  import "animate.css"
  export default {
    name: 'bus',
    data() {
      return {
        isShow: true
      }
    },
  }
  </script>
  
  <style scoped>
  .box {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background: #000;
  }
  
  </style>