Vue + Animate.css 实现过渡效果

1. 首先安装 Animate.css

npm install animate.css --save

2. 在 main.js 引入

import 'animate.css';

3. 更改 组件的class

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

  
hello

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

4 小案例

网站：Animate.css | A cross-browser library of CSS animations.

动画库官网链接：

https://animista.net/

https://www.minimamente.com/category/css/

http://guowc.github.io/animastore/

https://elrumordelaluz.github.io/csshake/

https://ianlunn.github.io/Hover/

https://angrytools.com/css/animation/