手写的 wow.js

用法：

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

class与data-class

<div class="content wow" data-class="a-fadeIn"></div>

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<L;i++){
					let o = {};
					o.h = W[i].offsetTop;
					o.c = W[i].getAttribute('data-class');
					hc.push(o);
					
				}

				function wow(){
					let clientH = document.documentElement.clientHeight || document.body.clientHeight;
					let addH = clientH - 100;
					let scrollT = document.documentElement.scrollTop || document.body.scrollTop;

					for(let i = 0;i<L;i++){

						if(scrollT + addH - hc[i].h <= 0){
							if(W[i].className.indexOf(hc[i].c) > 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;

			})();

总结：

    稍加改进wow.js,使反复上下滑动页面都有(fadeIn)效果.

个人能力有限，可改进的地方请指出，勿喷。