【css3】js条件下多次触发同一个css3动画的解决方案
本文适用于非循环播放动画，而是条件下触发播放动画的解决方案
通常，我们会写一个css3的动画作为一个样式，在需要播放动画的时候把样式加到元素上播放一次
如果需要多次触发播放动画，如果是使用将样式先去掉再马上加上的办法，将无法多次播放动画
这里介绍一下解决方案
<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样式都需要分开写（虽然是一抹一样的，但是要骗骗浏览器说这两个是不一样的动画，才能保证每次都触发））
可以看到代码中被注释掉的requestAnimationFrame这一段，思路是先把动画样式去掉，等渲染之后再把动画样式加上去，然而实践表明这个方法不可行（chrome上支持，但是ff上只能播放第一次的动画，所以还是用上面那个两个animation的办法吧）
想看效果的，这里传了压缩包可以下载查看：http://download.csdn.net/download/snow_finland/9984324
（压缩包里就多了两张图片，所以也可以随便找两个图片用上面的代码看效果）
