vue animate.css4.x 实现动画效果

animate.css 动画演示地址：https://animate.style/

1、安装animate.css

npm install animate.css --save

2、在main.js 中引入animate.css文件并挂载到vue上

// 引入动画animate.css
import animated from 'animate.css' 
Vue.use(animated)

3、使用动画信息

注意：安装4.x版本的animate.css 类名的使用发生了变化，需要添加前缀才可以生效，前缀是：animate__

（1）直接将类写在元素上

 <div class="animate__animated " :class="rightBtn.flag?'animate__fadeInRight':'animate__fadeOutLeft'">动画效果</div>

（2）使用vue的 transition 组件使用，推荐使用这种方式

  <transition  name="fade"
                enter-active-class="animate__animated animate__fadeInRight"
                leave-active-class="animate__animated animate__fadeOutRight"
                 >
                 <div class="animate__animated " :class="rightBtn.flag?'animate__fadeInRight':'animate__fadeOutLeft'">动画效果</div>
                 <!-- class="animate__animated " :class="rightBtn.flag?'animate__fadeInRight':'animate__fadeOutLeft'"  -->
        <right-info  v-if="rightBtn.flag"></right-info>
      </transition>