Vue + Animate.css 实现过渡效果

1. 首先安装 Animate.css

npm install animate.css --save

2. 在 main.js 引入

import 'animate.css';

3. 更改 <transition> 组件的class

我使用的是 Animate 4.x 版本，跟 3.x 语法有区别。

<transition
    enter-active-class="animate__animated animate__bounceInLeft"
    leave-active-class="animate__animated animate__bounceOutRight"
>
  <p v-if="show">hello</p>
</transition>

• enter-active-class 对应的是进入时 Animate.css 中的一种效果
• leave-active-class 对应的是离开时 Animate.css 中的一种效果