700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > animate.css+wow.js实现页面动画以及滚动到指定位置执行动画

animate.css+wow.js实现页面动画以及滚动到指定位置执行动画

时间:2019-03-16 07:42:46

相关推荐

animate.css+wow.js实现页面动画以及滚动到指定位置执行动画

一、安装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>

这样的话一个淡入就动画就添加完成了

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。