document.body.*对js animation动画多次执行的影响

XQ_ONE 2017-07-31 03:56:32

最近写了个css代码，发现一个问题。
我用js实现css animation，每次点击按钮或者滚动滚轮除法动画效果。起初效果只在第一次点击或滚动时触发，之后则无法再次触发。
后来偶然加了一句 document.body.scrollTop 在里面，发现动画可以多次触发。不甚明了，希望大牛们能指导一下。
加上诸如document.body.clientWidth等也可以实现多次触发动画

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

</head>

<body style="height: 5000px" id="wrapper">

<button id="b1">b1:点击变色</button>

	<!--方块-->

	<div style=" width: 300px; height: 100px; background:#000;" id="box1"></div>

	<div style=" width: 300px; height: 100px; background:blue;" id="box2"></div>



	<script>

		var box1=document.getElementById("box1");

		var box2=document.getElementById("box2");

		var b1=document.getElementById("b1");



		//css动画

		var newpara=document.createElement("style");

		newpara.setAttribute("id","mystyle");  

		document.getElementsByTagName('head')[0].appendChild(newpara);      

		// box1.style.position="fixed";

		box2.style.position="relative";



		//事件

		function fnc(){

			//清除animation

			box1.style.animation="";

			box2.style.animation="";

			

			var mycss=document.getElementById('mystyle');

        	mycss.innerHTML = '@keyframes myframes {0%   {background:blcak;}50%   {background:red;}100% {background:black;}}\n' + '@keyframes myframes2 {0%   {top:0px;}50%   {top:100px;}100% {top:0px;}}\n';



        	box1.style.animation="myframes "+"1s";//只能触发一次



		/*********关键，可连续执行动画*********/

        	document.body.scrollTop;//注释后动画只执行一次

        	/**************************************/  



        	box2.style.animation="myframes2 "+"1s";//多次触发



        }

        

        //注册点击事件

        b1.addEventListener("click",fnc);



        //注册滚轮事件

        if(document.addEventListener){

        	document.addEventListener('DOMMouseScroll',fnc,false);

        	}//W3C

        window.onmousewheel=document.onmousewheel=fnc;//IE/Opera/Chrome



    </script>

</body>

</html>