本文适用于非循环播放动画,而是条件下触发播放动画的解决方案
通常,我们会写一个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
(压缩包里就多了两张图片,所以也可以随便找两个图片用上面的代码看效果)