vue实现滑动到可视区域加载动画

需求：当页面向下滚动到可视区域时，动画出现；当页面向上回滚时，动画不会回退。

用到的插件：wow.js+animate.css

wow.js官方文档：https://wowjs.uk/docs.html
animate.css官方文档：https://animate.style/

安装插件：

npm install wowjs --save-dev
npm install animate.css --save

在main.js全局引入：

// 使用样式库
import animated from 'animate.css';
Vue.use(animated);
 
// 滚动动画 wow.js
import { WOW } from 'wowjs'
Vue.prototype.$wow = new WOW({
  boxClass: 'wow', // default
  animateClass: 'animated', // default
  offset: 150, // default
  mobile: true, // default
  live: 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() + ">")
  }
});

wow.js的配置：
参考文档：https://www.dowebok.com/131.html

offset为0时，设置动画的元素在出现在浏览器可视区域时执行动画

使用方法：
1、在.vue文件中，先初始化wow

// watch: {
// 异步加载部分，使用watch初始化
//   xxxx() {
//     this.$nextTick(() => {
//       // 在dom渲染完后,再执行动画
//       this.$wow.init();
//     });
//   },
// },
mounted() {
this.$nextTick(() => {
  this.$wow.init();
});
},

2、代码展示：
html：

css：

.fadeInRight {
  animation: fadeInRight 1s linear 1;
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

至此，动画效果就可以实现啦！！！

参考博客：https://blog.csdn.net/JackieDYH/article/details/123822385