animation动画结束后无法再次执行的问题

首先这里有一个结论：想要解决这个问题，我们只能选择监听animationend事件，其他的我们以为的可以解决的方案都是不可行的。

1、页面中的元素

<div class="st_apples">
	<!-- 动画会作用在这个span上 -->
	<span data-value=""></span>
</div>

2、CSS样式

.st_apples .apple_select {
            -webkit-animation: changeBg 3s linear;
            animation: changeBg 3s linear;
        }
        @-webkit-keyframes changeBg {
            0% {
                background: url("${ctx}/style/images/sharedServices/new/apple_big.png") no-repeat;
                background-size: 100% 100%;
                -webkit-transform: scale(1);
            }
            25% {
                background: url("${ctx}/style/images/sharedServices/new/apple_big.png") no-repeat;
                background-size: 100% 100%;
                -webkit-transform: scale(2);
            }
            50% {
                background: url("${ctx}/style/images/sharedServices/new/apple_big.png") no-repeat;
                background-size: 100% 100%;
                -webkit-transform: scale(1);
            }
            75% {
                background: url("${ctx}/style/images/sharedServices/new/apple_big.png") no-repeat;
                background-size: 100% 100%;
                -webkit-transform: scale(2);
            }
            100% {
                background: url("${ctx}/style/images/sharedServices/new/apple_big.png") no-repeat;
                background-size: 100% 100%;
                -webkit-transform: scale(1);
            }
        }

        @keyframes changeBg {
            0% {
                background: url("${ctx}/style/images/sharedServices/new/apple_big.png") no-repeat;
                background-size: 100% 100%;
                transform: scale(1);
            }
            25% {
                background: url("${ctx}/style/images/sharedServices/new/apple_big.png") no-repeat;
                background-size: 100% 100%;
                transform: scale(2);
            }
            50% {
                background: url("${ctx}/style/images/sharedServices/new/apple_big.png") no-repeat;
                background-size: 100% 100%;
                transform: scale(1);
            }
            75% {
                background: url("${ctx}/style/images/sharedServices/new/apple_big.png") no-repeat;
                background-size: 100% 100%;
                transform: scale(2);
            }
            100% {
                background: url("${ctx}/style/images/sharedServices/new/apple_big.png") no-repeat;
                background-size: 100% 100%;
                transform: scale(1);
            }
        }

这个动画是什么效果就不做介绍了。

之前的JQuery操作方式

$(".st_apples span[data-value="").addClass("apple_select").siblings().removeClass("apple_select");

这里想要实现的逻辑就是遍历一个数据，然后去找对应的span标签，让它闪烁。
所以就出现问题了，如果有连续两条数据对应的span是一样的，那么这个动画就一共只会执行一次。
我开始也以为不断的给它设置class就没问题，但是事与愿违。

解决方式

在此之前，需要了解 存在“动画结束”这个事件，各个版本的浏览器监听的不同：

var animations = {
     "animation": "animationend",
     "OAnimation": "oAnimationEnd",
     "MozAnimation": "animationend",
     "WebkitAnimation": "webkitAnimationEnd"
 }

具体都是对应的什么浏览器大家自己去了解一下。
所以给每一个span绑定监听事件就可以了：

$(".st_apples span").each(function() {
     // 目前只设置兼容谷歌浏览器
     $(this)[0].addEventListener("webkitAnimationEnd",function(){
     	 // 动画结束就直接去除这个动画
         $(this).css("animation","");
     });
 });

然后记得将上面的添加删除class的操作直接改为添加删除animation:

$(".st_apples span[data-value="+remark+"]").css("animation","changeBg 3s linear");

ok，到此为止，喔，对了，提醒一件小事情，因为动画结束到监听事件的内部代码（去除动画）执行完成存在一定的延迟。所以如果你的代码中存在定时器，那么请将定时器的时间稍微设置的比动画时间大一点，我一般设置1秒。这一点要切记。