vue 中使用wow.js 以及wow踩坑指南
作者:互联网
wowjs 依赖animate.css 需要单独安装 wowjs githup 地址 https://github.com/matthieua/WOW#readme npm 地址 https://github.com/animate-css/animate.css animate.css 地址 npm install animate.css --save 使用步骤 1. npm install wowjs --save-dev 2. npm install animate.css --save vue 注册wowjs main.js import 'animate.css/animate.min.css' app.vue import { WOW } from 'wowjs' watch: { $route(to, from) { this.$nextTick(() => { new WOW({ mobile: true, live: true, scrollContainer: '.layout-content' }).init() }) } }, 使用 <div class="trait-item wow bounceInUp" data-wow-duration="1s" :data-wow-delay="index + 5 + 's'" v-for="(item, index) in traits" :key="index" > <img :src="item.img" alt="" /> </div> 注意 1.scrollContainer 放实际滚动的容器 一般不用填此项 2. 引入wowjs 和初始化方式 元素 消失不见 概率是容器填错了 例如 移动端 底部为tabbar 浏览器实际没有滚动 wow是根据容器滚动判断才执行显示的 有问题查官方文档才是最好的方法 链接上面有 使用的包相应版本
"wowjs": "^1.1.3"
"animate.css": "^3.7.2"
标签:npm,vue,wowjs,wow,js,animate,save,css 来源: https://blog.csdn.net/weixin_42776027/article/details/114481784