WOW.js添加动画遇到的问题

近期的工作是对公司门户类首页进行一次改版，参照竞品可以看到随着鼠标的滚动，各个元素有一个很美的入场动画，之前对animation以及animate.css有过一定的了解，但是在随着滚动加入动画还是一点头绪 没有。在寻找的过程中看到有提到wow.js加animate.css，然后进行了解一番。

也在竞品的样式类中发现有wow类名。

在使用的时候跟大多数一样的方法

npm install animate.css --save


npm install wowjs --save-dev  

按照在man.js中全局引入也是会报错 getXXX什么元素没有，可能是vue3引入的原因。最后只能先下载然后将wow文件下的dist目录中的wow.js当做一个js文件来用，推荐不带min的虽然大但是方便调试发现问题。

在入口文件中引入js ,在script标签下初始化new WOW().init()。然后在想要添加动画的元素上添加类名 wow animate_animated animate_fadeInUp 等操作，这里呢如果使用的是animaite.css就需要引入下缀，在 new WOW()有一个option可以设置自行百度。

最最烦人的是设置了以后不报错也不生效，加了类名的除了首屏展示动画是正常的，滚动无效而且还消失不见了。有文章提到是缺少了viewTop 这个只是针对滚动盒子是以html,body为盒子的元素才会生效，viewTop在刚刚引入的wow.js中寻找应该是在最下边。除了这个还有一个属性一直被忽略就是scrollContenner，首先要确定滚动的盒子的具体位置，然后在初始化时将类名传入注意在wow.js中有一个默认default 在和option合并的时候会将传入的类名重置为null ,

this.config = this.util().extend(this.defaults,options);

这个是修改后的就是将default和option换了一下位置。不然传入的值永远是null  ,高度也获取不到。

经过设置动画完美添加!!!!!!!