一、安装animate.css以及wow.js
代码如下(示例):
//安装animate.cssnpm install animate.css --save//安装wow.jsnpm install wowjs --save
2.引入
代码如下(示例):
import 'animate.css';import wow from 'wowjs'import "wowjs/css/libs/animate.css"Vue.prototype.$wow = wow
4.使用
注册wow wow可以直接控制animate.css的动画延迟时间,或者动画持续时间等等
data-wow-duration:改变动画持续时间
data-wow-delay:动画开始前的延迟
data-wow-offset:动画开始的距离(与浏览器底部有关)
data-wow-iteration:动画的次数重复
使用看下面
mounted() {new this.$wow.WOW().init();},
4.使用
使用animate.css时看版本,4以上需要添加animate__前缀
添加一个淡入效果animate__animated是每个必须加的类animate__fadeIn是动画名称可以在官网去看示例直接复制就可以animate__是前缀fadeIn是动画名称,官网复制后会自动复制上前缀
使用wow.js设置动画持续时间为2秒加上wow类名实现当页面滑动到某一元素时动画在执行,就不用去监听滚动条等等一系列东西了,直接加上wow类名就可以
<div data-wow-duration="2s" class="wow animate__animated animate__fadeIn"></div>
这样的话一个淡入就动画就添加完成了