手写的wow.js解析

手写的 wow.js

用法： 给相应的dom添加 ： class与data-class 设置 css 应用js

class与data-class

css

.a-fadein{

animation: fadein 1s both;

}

@keyframes fadein{

0%{opacity:0};

100%{opacity:1};

}

.wow{

visibility: hidden;

}

js

(function(){

let w = document.getelementsbyclassname('wow');

let l = w.length;

// 存储 wow的数据height与class

let hc = [];

for(let i = 0;i 0){

w[i].classname = w[i].classname.replace('a-fadein',' ');

console.log(w[i].classname);

w[i].style.visibility = 'hidden';

}

}else{

if(w[i].classname.indexof(hc[i].c) < 0){

w[i].classname += " " + hc[i].c;

w[i].style.visibility = 'visible';

}

}

}

}

window.onscroll = wow;

window.onload = wow;

})();