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

发布网友 发布时间：2023-02-11 06:00

我来回答

共5个回答

热心网友 时间：2024-08-11 05:00

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

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

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

缺点 动画效果执行一次 滑到顶部再往下滑动就无效了 需要页面刷新了

热心网友 时间：2024-08-11 05:00

当网页的向下滚动的时候，有些元素会产生细小的动画效果。然而直接用animate.css是不行的如果自己写判断位置和动画结合的话也是可以但是动画效果不是特理想需要多次调试，其次也是很麻烦的所以该插件帮我们 写好了，我们只需要在浏览器滚动到该盒子位置为他加上在animate.css我们需要的效果类名既可。
WOW.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。
兼容性能：；wow.js 使用了 querySelectorAll 方法，IE 低版本会报错。iE10+
缺点 动画效果执行一次 滑到顶部再往下滑动就无效了 需要页面刷新了。

热心网友 时间：2024-08-11 05:00

刚开始的思路，因为严格模式下，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;
}

mole.exports = StripStrictLoader;
1

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

const path = require('path')
mole.exports = ({
transpileDependencies: true,
chainWebpack: config => {
config.mole
.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
报错消失！！！可以解决！

热心网友 时间：2024-08-11 05:01

Wow.js的动画可以运行多次。例如:我滚动到页面底部并查看所有动画,如果我滚动回到顶部,则再次看到动画,就像向下滚动一样。WOW 下载地址 当网页的向下滚动的时候,有些元素会产生细小的动画效果。然而直接用animate.css是不行的如果自己WOW.js 是一款帮助你实现滚动页面时触发CSS 动画效果的插件

热心网友 时间：2024-08-11 05:02

1、安装插件
2、在main.js全局引入
3、将wow.js在需要的.vue文件中单独引用。
4、使用动画