「这是我参与2022首次更文挑战的第9天，活动详情查看：2022首次更文挑战」
大家好，我是 摸鱼小公举，真正的强者，不会怨天尤人，如果想不被别人看轻，你就只有付出比别人多十倍百倍的努力，才能站的比别人更高。上一篇文章是 vuex页面刷新数据丢失问题的多种解决方法;今天我们来学习一下WOW动画的使用法。
WOW动画的简介
github文档链接：github.com/matthieua/W…
只有向下滚动页面时才会显示 CSS 动画，其主要依赖于 animate.css 动画。
WOW对象的相关属性描述
| 属性 | 描述 |
|---|---|
| boxClass | 需要执行动画的元素的 class |
| animateClass | animation.css 动画的 class |
| offset | 距离可视区域多少开始执行动画 |
| mobile | 是否在移动设备上执行动画 |
| live | 异步加载的内容是否有效 |
| callback | 每次动画开始触发的回调 |
| scrollContainer | 可选滚动容器选择器 |
使用方法如下
1,安装 wow.js
Bower
bower install wowjs
或
NPM
npm install wowjs
2，代码设置如下
（1）HTML代码 标签盒子添加 animate.css 相关类名
以下属性的值是可以自己慢慢调的，最基础的用法只需要加上wow 动画类名就行了
<div class="wow animate__fadeInLeft " data-wow-duration="1s" data-wow-offset="200">
</div>
<div class="itemRight wow animate__fadeInUp" data-wow-duration="1s" data-wow-offset="200">
</div>
（2）JS代码
<script>
if (process.client) { //nuxt.js在vue组件中使用window对象编译报错的解决方法 (不是用nuxt来搭建项目的可忽略)
var { WOW } = require("wowjs") // 只能用var声明
}
export default {
这里是操作DOM元素，vue中最早能获取到元素的是mounted周期函数，即便这样还是会有获取不到DOM元素的情况所以加了$nextTick
mounted() {
this.$nextTick(() => {
if (process.client) {
new WOW({
boxClass: "wow", // 需要执行动画的元素的 class
animateClass: "animate__animated", // animation.css 动画的 class
offset: 15, // 距离可视区域多少开始执行动画
mobile: true, // 是否在移动设备上执行动画
live: false, // 异步加载的内容是否有效
callback: null, // 每次动画开始触发的回调
scrollContainer: null // 可选滚动容器选择器
}).init()
}
})
}
}
</script>
效果动画如下
结语：
其实自己也尝试写了类似的效果，但是各个电脑兼容的效果差强人意，以为我这边设置滚动高度写死了我电脑的，不知道怎么兼容别的类型电脑，有更好的效果demo欢迎推荐。好了文章到此就结束了，欢迎大家( 点赞+评论+关注 ) 有问题可以来互相交流一下。希望这篇文章对大家有帮助,也希望大家多多支持我，今天是我参与2022首次更文挑战的第9天，加油！
