使用Javascript反转关键帧动画

Question

我使用关键帧为一个块设置动画,然后在javascript中触发反转动画,如下所示:

$('#block').removeClass('animate1').addClass('animate2');

使用animate1和animate2对应于两个调用动画的CSS类(仅用于演示,仅在webkit中),以及#block一个简单的div:

CSS

.animate1 {
    -webkit-animation: shift 1s ease-in-out forwards;
}
.animate2 {
    -webkit-animation: shift 1s ease-in-out backwards reverse;
}
@-webkit-keyframes shift {
    from {
        left: 0px;
    }
    to {
        left: 200px;
    }
}

HTML

<div id="block" class="animate2"></div>

它根本不起作用.请参阅此小提琴演示(Chrome 30).

---

事实

如果我以相反的方式触发动画,我的意思是先颠倒一个,然后是正常的动画,它正常工作(演示):

$('#block').removeClass('animate2').addClass('animate1'); //Works.

如果我删除当前类并添加具有通过单击按钮触发的独立函数的下一个类,它也会起作用.

有人能帮助我理解这种奇怪的行为吗？我被卡住了!

---

编辑

对于未来的访问者,我不再寻找解决方法,只是试图找出这里发生的事情:

• 浏览器需要什么"重置时间"？
• 为什么它在某种程度上起作用,而在另一种中却起作用？
• 为什么在内部闭包中触发动画有效？

如果合适,我会更改已接受的答案.

Answer 1

当您重用动画时，有时您会继承它的状态。

这种情况发生的方式有点难以预测，因为它并不总是一致的（我也猜测 w3c 标准没有准确规定在这种情况下应该发生什么）。

在您的情况下，您正在重用应该发生一次的动画（animation-iteration-count：初始，即1），并且已经发生过一次。所以，什么也没有发生。（确实，反过来也有效，但正如我之前所说，这个问题并不总是一致的。）

解决该问题的一种方法是重置转换。

setTimeout(function () {
    $('#block').removeClass('animate1');
}, 1950);
setTimeout(function () {
    $('#block').addClass('animate2');
}, 2000);

这使得 div 暂时没有任何动画，因此有效地重置了过渡。现在你遇到了 div 跳转到初始状态的问题，所以这不能按原样使用；但我试图解释为什么你会遇到这个问题。

正如雅各布所说，一个有效的解决方案可以是通过过渡，或者创建不同的动画。

跳跃演示