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

JavaScript014

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

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

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

兼容性能:;wow.js 使用了 querySelectorAll 方法,IE 低版本会报错。iE10+

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

1、在你的点击事件中加上一个判断,假设产生动画效果目标的是aa这个节点,那么你要加上这个判断

if(!$(aa).is(:animated)){

//执行你的操作

}

他会确保你的动画只会在上一个动画结束后才能产生 ,可以保持动画的完整性,但是连续点击时会有反映迟钝的感觉

2、$(aa).stop(true,false).animate({},1000)

这个则是会强制你的上一动画立即结束并到达动画执行结束时状态同时来运行下一次动画,会造成动画脱节不太美观,但是反应迅速

说到这里我们解释下stop()这个函数的用法。

stop 是jQuery中用于控制页面动画效果的方法。运行之后立刻结束当前页面上的动画效果。

stop在新版jQuery中添加了2个参数:

第一个参数的意思是是否清空动画序列,也就是stop的是当前元素的动画效果还是停止后面附带的所有动画效果,一般为false,跳过当前动画效果,执行下一个动画效果;

第二个参数是是否将当前动画效果执行到最后,意思就是停止当前动画的时候动画效果刚刚执行了一般,这个时候想要的是动画执行之后的效果,那么这个参数就为true。否则动画效果就会停在stop执行的时候

3、第三种方法应用就需要设置一个判断是否处于动画的标志,一般是一个点击事件执行N多个步骤的动画之后然后跳到下一个动画。

var flag = false

function aa(){

if(flag) return//这里指当这个标志flag为真的时候,直接返回,不执行当前的这个动画。

flag=true//这里是在执行这个动画的最开始的时候把标志flag设置为真,在这个动画没执行完之前这个值一直为真,当下次运行这个函数的时候,由于flag值为真,也不会执行。必须等到这个函数执行完之后才会再次执行这个动画。

……………….

………………..

………………..

$(“aa”).animated({“left”:”100″},1000,function(){

………………….

flag=false//回到最初始状态,也是也表示这一轮动画执行完毕。

})

}

前端同事使用vue开发网页,并需要使用wowjs进行动画效果展示。但wowjs并未生效,找不到原因。

npm 安装wowjs的时候,自动会安装animate.css,但是css文件在node_modules/wowjs目录下。