js动态改变动画(animation)状态

贪睡的胖子

4241人浏览 · 2020-06-20 01:11:45

贪睡的胖子 · 2020-06-20 01:11:45 发布

写的只是个demo而已,所以变量名怎么简单怎么来的

<style>
		
		:root{
			--bytheway:100px;
		}
		.tt{
			
		}
		.ak{
			animation:ao 1s ease;
		}
		@keyframes ao{
			from{transform: translateX(0%);}
			to{transform: translateX(var(--bytheway));}
		}
	</style>

<body >
		
		<div id="one" class="ab" style="position: absolute;top: 10%;border-radius: 50%;height: 20%;width: 10%;background: red;"></div>
	    
	</body>

<script type="text/javascript" src="../jquery-3.4.1.min.js" ></script>
		<script type="text/javascript">
			
			let root = document.documentElement;
			
			let q=$("#one");
			let a=10;

			setInterval(()=>{
				a+=10;
				root.style.setProperty('--bytheway',a.toString()+"px");
		
				q[0].className="ak";
				console.log("2:"+q[0].className);
			},1500);
			

			q.bind("webkitAnimationEnd", function() {  //监听事件
	
                q[0].className="";
			});
			
			
			</script>
</script>

注意：一定要把改变的操作写在监听动画是否完成的事件里，webkit是谷歌的内核其他浏览器可能稍稍不同（可能理解转成表达有些不正确，有错的话大家可以尽情指正）