常用的vue动画组件库
常用vue动画组件库
·
animate.style是一个常用的动画组件库,非常适合强调、主页、滑块和引导注意力的提示
1,安装
使用 npm 安装:
$ npm install animate.css --save
导入到main文件夹中:
import 'animate.css';
其他的安装方法官网也有
动画.css |CSS 动画的跨浏览器库。 (animate.style)
2,用法
将类和动画名称直接添加到元素中
<h1 class="animate__animated animate__bounce">An animated element</h1>
3,自定义属性
还可以用自定义属性来控制动画的持续时间、延迟和迭代


除了动画效果,通常我们还有一些别的需求。比如动画循环执行、动画延时执行、动画执行时长。这些设置,Animate.css都给我们实现了。同样也只需配置几个类名,完全不用JS控制。
延迟执行:
-
animate__delay-2s2sanimate__delay-3s3sanimate__delay-4s4sanimate__delay-5s5s
执行时长:
animate__slow |
2s |
animate__slower |
3s |
animate__fast |
800ms |
animate__faster |
500ms |
迭代次数:
animate__repeat-1 1
animate__repeat-2 2
animate__repeat-3 3
animate__infinite infinite
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐

所有评论(0)