javascript - 使用 Javascript 反转关键帧动画

Question

我使用关键帧为 block 设置动画，然后在 javascript 中触发反向动画，如下所示:

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

用animate1和animate2对应两个调用动画的CSS类(demo，仅在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>

它根本不起作用。参见 this fiddle用于演示(Chrome 30)。

---

事实

如果我以相反的方式触发动画，我的意思是先是反转的，然后是正常的，它工作正常(demo):

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

如果我删除当前类并添加具有通过单击按钮触发的独立功能的下一个类，它也有效。

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

---

编辑

对于 future 的访问者，我不再寻找解决方法，只是想找出这里发生的事情:

• 浏览器要求的“重置时间”是多少？
• 为什么它以一种方式起作用，而在另一种方式中不起作用？
• 为什么在内部闭包中触发动画有效？

如果合适，我会更改已接受的答案。

Answer 1

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

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

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

解决它的一种方法是重置转换。

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

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

正如 Jacob 所说，一个可行的解决方案可以通过过渡，或者创建不同的动画。

jumping demo