【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

（壓縮包裏就多了兩張圖片，因此也能夠隨便找兩個圖片用上面的代碼看效果）
動畫