借助动画库

网址

官网：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）