说明
wowjs-当页面向下滚动时，动画出现；当页面向上回滚时，动画不会回退。
安装
npm install wowjs --save-devnpm install animate.css --save
方式一-全局引入
main.js
// 使用样式库import animated from 'animate.css';Vue.use(animated);// 滚动动画 wow.jsimport { WOW } from 'wowjs'Vue.prototype.$wow = new WOW({boxClass: 'wow', // defaultanimateClass: 'animated', // defaultoffset: 150, // defaultmobile: true, // defaultlive: false,// live为true时，控制台会提示：MutationObserver is not supported by your browser. & WOW.js cannot detect dom mutations, please call .sync() after loading new content.callback: function (box) {console.log("WOW: animating <" + box.tagName.toLowerCase() + ">")}});
offset为0时，设置动画的元素在出现在浏览器可视区域时执行动画
使用
.vue文件中，先初始化wow// watch: {// 异步加载部分，使用watch初始化// xxxx() {//this.$nextTick(() => {// // 在dom渲染完后,再执行动画// this.$wow.init();//});// },// },mounted() {this.$nextTick(() => {this.$wow.init();});},
完成初始化后，在需要添加动画的元素上，添加上相关动画的类名即可<div class="wow animate__animated animate__fadeIn">900</div>wow 为配置中的动画类名，必要！animate__animated animate__fadeIn 为animate.css 的动画效果1. 自定义动画持续时间添加 data-wow-duration="2s" <div class="wow animate__animated animate__fadeIn" data-wow-duration="2s">900</div>2. 自定义动画延迟时间添加 data-wow-delay="5s"<div class="wow animate__animated animate__fadeIn" data-wow-delay="5s">900</div>3. 自定义滚动距离添加 data-wow-offset="200" 效果：当元素距离可视区域200时开始执行动画（元素顶部到浏览器底部的距离）<div class="wow animate__animated animate__fadeIn" data-wow-offset="200">900</div>4. 自定义动画重复次数添加 data-wow-iteration="2" 效果：动画会连续播放2次<div class="wow animate__animated animate__fadeIn" data-wow-iteration="2" >900</div>若想动画无限重复播放，则使用 data-wow-iteration="infinite"<div class="wow animate__animated animate__fadeIn" data-wow-iteration="infinite" >900</div>
全量代码
<template><div class="warp"><span>内容</span><div class="wow animate__animated animate__fadeIn">900</div><div class="wow animate__animated animate__fadeIn" data-wow-duration="2s">900</div><div class="wow animate__animated animate__fadeIn" data-wow-delay="5s">900</div><div style="height: 1200px"></div><!-- 添加 data-wow-offset="200" 效果：当元素距离可视区域200时开始执行动画（元素顶部到浏览器底部的距离） --><div class="wow animate__animated animate__fadeIn" data-wow-offset="200">900</div><div style="height: 1300px"></div><div class="box100">0</div><div class="box100">100</div><div class="box100">200</div><div class="box100">300</div><div class="box100">400</div><div class="box100">500</div><div class="box100">600</div><div class="box100">700</div><div class="box100">800</div><div class="box100 wow animate__animated animate__fadeIn">900</div><div class="box100">1000</div><div class="box100">1100</div><div class="box100">1200</div></div></template><script>export default {name: "home2",components: {},data() {return {};},// watch: {// 异步加载// xxxx() {//this.$nextTick(() => {// // 在dom渲染完后,再执行动画// this.$wow.init();//});// },// },mounted() {this.$nextTick(() => {this.$wow.init();});},methods: {},destroyed() {},};</script><style lang="scss" scoped>.box100 {height: 100px;background: #3a8ee6;border: 1px solid black;}</style>
方式二-局部引入
main.js
import animated from 'animate.css'Vue.use(animated)
使用
//.vue文件import { WOW } from 'wowjs'//初始化wow.jsmounted(){var wow = new WOW({boxClass: 'wow', //需要执行动画元素的ClassanimateClass: 'animated', //animation.css动画的Classoffset: 0, //距离可视区域多少开始执行动画mobile: true， //是否在移动设备执行动画live: true //异步加载的内容是否有效})wow.init();}//属性data-wow-duration：更改动画持续时间 data-wow-delay：动画开始前的延迟data-wow-offset：开始动画的距离（与浏览器底部相关）data-wow-iteration：动画的次数重复（无限次：infinite）
全量代码
<template><div class="warp"><span>内容</span><div class="wow animate__animated animate__fadeIn">900</div><div class="wow animate__animated animate__fadeIn" data-wow-duration="2s">900</div><div class="wow animate__animated animate__fadeIn" data-wow-delay="5s">900</div><div style="height: 1200px"></div><!-- 添加 data-wow-offset="200" 效果：当元素距离可视区域200时开始执行动画（元素顶部到浏览器底部的距离） --><div class="wow animate__animated animate__fadeIn" data-wow-offset="200">900</div><div style="height: 1300px"></div><div class="box100">0</div><div class="box100">100</div><div class="box100">200</div><div class="box100">300</div><div class="box100">400</div><div class="box100">500</div><div class="box100">600</div><div class="box100">700</div><div class="box100">800</div><div class="box100 wow animate__animated animate__fadeIn">900</div><div class="box100">1000</div><div class="box100">1100</div><div class="box100">1200</div></div></template><script>import { WOW } from "wowjs";export default {components: {},data() {return {};},computed: {},mounted() {this.$nextTick(() => {let wow = new WOW({boxClass: "wow", //需要执行动画元素的ClassanimateClass: "animated", //animation.css动画的Classoffset: 0, //距离可视区域多少开始执行动画mobile: true, //是否在移动设备执行动画live: false, //异步加载的内容是否有效});wow.init();});},};// 介绍// data-wow-duration：更改动画持续时间 data-wow-delay：动画开始前的延迟// data-wow-offset：开始动画的距离（与浏览器底部相关）// data-wow-iteration：动画的次数重复（无限次：infinite）</script><style lang="scss" scoped >.warp {font-size: 30px;.box100 {height: 100px;background: #3a8ee6;border: 1px solid black;}}</style>
