近期的工作是对公司门户类首页进行一次改版,参照竞品可以看到随着鼠标的滚动,各个元素有一个很美的入场动画,之前对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 ,高度也获取不到。
经过设置动画完美添加!!!!!!!