【css3】js条件下屡次触发同一个css3动画的解决方案

时间 2019-11-09

原文原文链接

本文适用于非循环播放动画，而是条件下触发播放动画的解决方案css

一般，咱们会写一个css3的动画做为一个样式，在须要播放动画的时候把样式加到元素上播放一次html

若是须要屡次触发播放动画，若是是使用将样式先去掉再立刻加上的办法，将没法屡次播放动画css3

这里介绍一下解决方案chrome

<html>
<head>
	<meta charset="utf8" />
	<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>Animation Test</title>
	<style>
		html,body,div,p{
			margin: 0;
			padding: 0;
		}
		.icon-wrap{
			position: relative;
			display: flex;
			width: 80px;
			height: 40px;
			align-items: center;
			justify-content: center;
			background-color: #000;
		}
		.icon{
			width: 14px;
			height: 12px;
		}
		.animation-icon{
			position: absolute;
			width: 14px;
			height: 12px;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -7px;
			margin-top: -6px;
			opacity: 0;
		}
		
		@keyframes animation1 {
			0%   {transform: scale(1.4);opacity: 0;}
			50%  {transform: scale(2.8);opacity: 1;}
			100%  {transform: scale(1);opacity: 0;}
		}
		.animation1 {
			animation: animation1 400ms linear;
		}
		@keyframes animation2 {
			0%   {transform: scale(1.4);opacity: 0;}
			50%  {transform: scale(2.8);opacity: 1;}
			100%  {transform: scale(1);opacity: 0;}
		}
		.animation2 {
			animation: animation2 400ms linear;
		}
	</style>
</head>

<body>
	<a class="icon-wrap" id="J_animation_btn">
		<img class="animation-icon" id="J_animation_icon" src="icon-like-yellow.svg">
		<img class="icon" src="icon-like-white.svg">
    </a>
<script>
window.onload = function(){
	var btn = document.getElementById('J_animation_btn');
	var ani_icon = document.getElementById('J_animation_icon');
	var ani_status = 0;
	btn.addEventListener('click', function(){
		/*
		ani_icon.className = 'animation-icon';
		requestAnimationFrame(function(){
			ani_icon.className = 'animation-icon animation1';
		});
		*/
		if(ani_status == 1){
			ani_icon.className = 'animation-icon animation2';
			ani_status = 2;
		}else{
			ani_icon.className = 'animation-icon animation1';
			ani_status = 1;
		}
	});
}
</script>
</body>
</html>

这里的例子是一个框里有两个icon，一个显示（icon），一个是动画（animation-icon），浏览器

animation-icon，交替使用animation1和animation2来播放动画（注意animation1和animation2的keyframes和class样式都须要分开写（虽然是一抹同样的，可是要骗骗浏览器说这两个是不同的动画，才能保证每次都触发））markdown

能够看到代码中被注释掉的requestAnimationFrame这一段，思路是先把动画样式去掉，等渲染以后再把动画样式加上去，然而实践代表这个方法不可行（chrome上支持，可是ff上只能播放第一次的动画，因此仍是用上面那个两个animation的办法吧）svg

想看效果的，这里传了压缩包能够下载查看：http://download.csdn.net/download/snow_finland/9984324flex

（压缩包里就多了两张图片，因此也能够随便找两个图片用上面的代码看效果）
动画