常用的vue动画组件库

animate.style是一个常用的动画组件库,非常适合强调、主页、滑块和引导注意力的提示

1,安装

使用 npm 安装:

$ npm install animate.css --save

导入到main文件夹中:

import 'animate.css';

其他的安装方法官网也有

​​​​​​动画.css |CSS 动画的跨浏览器库。 (animate.style)

2,用法

将类和动画名称直接添加到元素中

An animated element

3,自定义属性

还可以用自定义属性来控制动画的持续时间、延迟和迭代

常用的vue动画组件库_第1张图片

除了动画效果,通常我们还有一些别的需求。比如动画循环执行、动画延时执行、动画执行时长。这些设置,Animate.css都给我们实现了。同样也只需配置几个类名,完全不用JS控制。

延迟执行:

  • animate__delay-2s 2s
    animate__delay-3s 3s
    animate__delay-4s 4s
    animate__delay-5s 5s

 执行时长:

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

你可能感兴趣的:(vue.js,动画,前端)