animate.css动画库+wow.js实现滚动到可视区域显示动画
animate.css动画库+wow.js实现滚动到可视区域显示动画
·
1.安装animate.css动画库
npm install animate.css ;
2.安装wow.js
npm install wowjs --save
3.在mian.js导入
import 'animate.css'//导入animate.css
import wow from 'wowjs'//全局导入wow.js
Vue.prototype.$wow = wow //全局注册到Vue实例中
4.在组件中使用(定义mouted使得组件在渲染之前挂在wowjs)
mounted () {
new this.$wow.WOW().init({//新建实列
boxClass: 'wow',//class名字
animateClass: 'animate__animated',//animateclass动画库类名,和当前animate动画库决定
offset: 0,//到元素距离触发动画(当默认为0)
mobile: true,//在移动设备上触发动画(默认为true)
live: true//对异步加载的内容进行操作(默认为true)
})
},
5.在元素上使用(结合animate动画库使用)
例:
<div class="wow animate__animated animate__fadeInLeftBig">
//animate__animated(基础类名,跟随animate_animated动画库说明)
//animate__fadeInLeftBig(动画效果类名)
6.好了大功告成!可以去看效果了。
更多推荐
已为社区贡献1条内容
所有评论(0)