vue动画效果 Animate.css

1. 安装Animate.css
npm install animate.css --save
2. 配置 Animate.css
全局引入：写在main.js中

局部引入：写在要使用的 .vue文件中

// 动画 animate.css
import animate from "animate.css";
3. 在指定元素上使用
在需要添加动画的元素上，添加上对应的动画 class 类名即可

<div class="animate__animated animate__zoomIn animate__delay-2s animate__slower animate__repeat-2">2秒后缓慢放大进入（播放2次）</div>

animate__animated 指定使用animate.css中的动画效果
animate__zoomIn 指定使用animate.css中的放大进入动画效果
animate__delay-2s 设置动画延迟播放时间，此处为2s，还可设置为1s，2s，3s，4s，5s
animate__slower 设置动画的速度，此处为最慢的slower，还可以设置为slower，slow，fast，faster
animate__repeat-2 设置动画播放次数，此处为2次，还可以设置为 1, 2, 3 。若想无限循环播放，使用 animate__infinite

 

 

 

 

 

动画官网：https://animate.style/

转：https://blog.csdn.net/weixin_41192489/article/details/111083527