藉助動畫庫

網址

官網：http://animate.style
​
npm管理網站：https://www.npmjs.com/package/animate.css

下載

npm install(i) animate.css
當前版本號：+ [email protected]

如何使用動畫庫

第一、下載動畫庫
第二、引入animate.css
  <link rel="stylesheet" href="./node_modules/animate.css/animate.min.css" />
第三步、使用
     <transition leave-active-class='animate__animated animate__bounceOut' enter-active-class='animate__animated animate__lightSpeedInRight'>
         <div v-show='isShow' class="box"></div>
     </transition>
    
    
進入的動畫庫類名呼叫： enter-active-class
離開的動畫庫類名呼叫： leave-active-class
 

過渡動畫的使用場景

v-if 
v-show
路由切換
動態is就是動態元件的切換

注意點：

頁面出現多個過渡動畫的時候，不建議兩種狀態都使用，會花裡胡哨，眼花繚亂。一般建議大家用enter-active-class

  <div id="app">
   <button @click="isShow=!isShow">點選我切換</button>
   <transition
    enter-active-class="animate__animated animate__lightSpeedInRight"
   >
    <h1 v-show="isShow">{{msg}}</h1>
   </transition>
   <transition
    enter-active-class="animate__animated animate__rotateOutDownLeft"
   >
    <h1 v-show="!isShow">{{info}}</h1>
   </transition>
  </div>
 

元件（component）