wow.js怎么每次鼠标下滑都加载动画

Posted 2023-03-26

当网页的向下滚动的时候，有些元素会产生细小的动画效果。然而直接用animate.css是不行的如果自己写判断位置和动画结合的话也是可以但是动画效果不是特理想需要多次调试，其次也是很麻烦的所以该插件帮我们 写好了，我们只需要在浏览器滚动到该盒子位置为他加上在animate.css我们需要的效果类名既可。

WOW.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。

兼容性能：；wow.js 使用了 querySelectorAll 方法，IE 低版本会报错。iE10+

缺点 动画效果执行一次 滑到顶部再往下滑动就无效了 需要页面刷新了 参考技术A 当网页的向下滚动的时候，有些元素会产生细小的动画效果。然而直接用animate.css是不行的如果自己写判断位置和动画结合的话也是可以但是动画效果不是特理想需要多次调试，其次也是很麻烦的所以该插件帮我们 写好了，我们只需要在浏览器滚动到该盒子位置为他加上在animate.css我们需要的效果类名既可。
WOW.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。
兼容性能：；wow.js 使用了 querySelectorAll 方法，IE 低版本会报错。iE10+
缺点 动画效果执行一次 滑到顶部再往下滑动就无效了 需要页面刷新了。 参考技术B 刚开始的思路，因为严格模式下，this是undefined，所以移除了use strict就不会报错
尝试方法：
1、在项目根目录新建一个stripStrictLoader.js，并写入以下代码

function StripStrictLoader(content)
if (content.includes('use strict')) content.replace(/('|")use strict('|");?/gm, '');
if (this.cacheable) this.cacheable(true);
return content;


module.exports = StripStrictLoader;
1

2、在vue.config.js中加入一段代码

const path = require('path')
module.exports = (
transpileDependencies: true,
chainWebpack: config =>
config.module
.rule('removeStrictLoader')
.test(/\.(t|j)sx?$/)
.enforce('post')
.use('removeStrictLoader')
.loader(path.resolve('./stripStrictLoader.js'))
.end()

)
1
2
3
！

尝试解决方案二：
将wow.js放到 public/static/js 目录下,
然后在index.html中直接引入：

<script type="text/javascript" src="./static/js/wow.js"></script>
<script type="text/javascript">
new WOW().init()
</script>
1
2
3
4
1
2
3
4
报错消失！！！可以解决！ 参考技术C Wow.js的动画可以运行多次。例如:我滚动到页面底部并查看所有动画,如果我滚动回到顶部,则再次看到动画,就像向下滚动一样。WOW 下载地址 当网页的向下滚动的时候,有些元素会产生细小的动画效果。然而直接用animate.css是不行的如果自己WOW.js 是一款帮助你实现滚动页面时触发CSS 动画效果的插件 参考技术D 1、安装插件
2、在main.js全局引入
3、将wow.js在需要的.vue文件中单独引用。
4、使用动画

wow加载动画

1.wow.js依赖于animate.css，首先在头部引用animate.css或者animate.min.css

       <link rel="stylesheet" href="css/animate.css">  

2.在最底部引用wow.js或者wow.min.js，然后再下面再写一行javascript代码（无需引用jQuery）

    <script type="text/javascript" src="js/wow.min.js"></script>  

    <script type="text/javascript">  

   new WOW().init();  

   </script>  

3.

在css下方js上方写需要动画的元素（必须设置为块状或者行内块状），并添加class类名

    在需要动画的标签上添加.wow 和 你的动画元素即可

1. <div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10"  
2.   data-wow-iteration="10"></div> 
3. 类名前面的wow是每一个带动画的元素都要加的，slideInLeft就是说明动画样式。

      后面的data-wow-duration（动画持续时间）、data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）和data-wow-iteration（动画执行次数）这四个属性可选可不选

      注意：其中data-wow-offset="数值"中的数值是动画完成后元素距离显示器底部的位置，而不是距离浏览器窗口底部的位置。