【技术】nuxt中引入wow和animate.css随页面滚动出现动画
安装cnpm install wowjs --save-dev安装成功后:“package.json"wowjs": "^1.1.3"2.nuxt.config.js中引入css:['~/assets/css/animate.css'],3.在所需要用到动画在的vue文件中引入<script>if (process.browser...
·
- 通过nodejs安装
cnpm install wowjs --save-dev
安装成功后:“package.json
"wowjs": "^1.1.3"
2.nuxt.config.js中引入
css:[
'~/assets/css/animate.css'
],
animate.css 官网:https://daneden.github.io/animate.css/
3.在所需要用到动画在的vue文件中引入
<script>
if (process.browser) { // 在这里根据环境引入wow.js
var {WOW} = require('wowjs')
}
</script>
在mouted函数中:
mounted() {
if (process.browser) { // 在页面mounted生命周期里面 根据环境实例化WOW
new WOW({
live: false,
offset: 0
}).init()
}
}
温馨提示:live为true时,浏览器调试器会弹出警告
WOW.js cannot detect dom mutations, please call .sync() after loading new content.
参考:https://github.com/matthieua/WOW/issues/166
4.在Html中使用:
用 wow + 对应的animatie.css的类名就可以了,会随着屏幕滚动加载动画
<div class="wow bounceInDown">hello</div>
5.animatie动画演示(分类很详细,便于选择对应的动画效果):
http://www.dowebok.com/demo/2014/98/###
6.参考文档:
vue使用WOW.js
Setup wow.js
更多推荐
已为社区贡献5条内容
所有评论(0)