css3-animation利用className切换来控制动画

昨天在开发中，使用animation时，碰到一个问题：
切换className时，其中一个className定义的动画不起作用，经过对animation对进一步了解后，终于解决该问题。
不起作用的原因是因为，在第一个className定义的动画执行完毕后，目标元素动画所需要的动画属性未定义，所以才造成动画失效。
简单的例子(本例子只是为了演示animation，故不考虑兼容性)：

DOM结构

    
    



    点我执行动画
    
    

在这个情况下，className切换到hidden时，animation是不起作用的，这时，是因为.animation-targe元素的transform属性值跟添加.active样式后的值不一致，所以，当添加.hidden时，.animation-targe元素直接跳到动画结束的状态。
现在，让我们修改一下js代码，为.animation-targe元素指定动画结束后的transform属性值。
代码如下：

setTimeout(function () {
    document.querySelector('.animation-target').style.transform = 'translateX(100%)';
},1000);

添加定时的原因是为了设置延迟添加样式，如果不添加setTImeout定时器，.animation-targe元素将直接移动到指定位置（定时器的时间跟动画时间一致）。
附上完整的JS代码：