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

posted @ 2022-08-09 15:32  炽橙子  阅读(322)  评论(0编辑  收藏  举报