vue中的動畫庫（animate）

借助動畫庫

網址

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

下載

npm install(i) animate.css
當前版本號：+ animate.css@4.1.1

如何使用動畫庫

第一、下載動畫庫
第二、引入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）