javascript - 为什么去掉类名后 CSS 动画还继续播放？

Question

我正在尝试在我正在构建的应用程序中创建一个简单的“编辑模式”功能。 当应用处于编辑模式时，元素需要摆动。

我添加了一个 CSS 动画来实现摆动效果。动画使用变换来操纵方向和位置。

@keyframes wobble {
    0% { transform: translateY(2px) rotate(-2deg);}
    25% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(2px) rotate(2deg); }
    75% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(2px) rotate(-2deg); }
}

然后使用jQuery的toggleClass函数来触发动画。

$('button').on('click', function(){
    $('.items').toggleClass('editting');
})

这在 Chrome 中运行良好，但在 Internet Explorer 中，即使类被删除，动画仍会继续播放。

奇怪的是，额外点击按钮 2 次会停止 IE 中的动画。

参见 jsFiddle here

以前有没有人遇到过这种情况？

Answer 1

似乎 Internet Explorer 在删除类名时没有正确注册动画。

作为修复，我添加了一个 not-editting 类名来抵消 editting 动画。

通过将此功能与此 CSS 一起添加，我能够让 Internet Explorer 按预期运行。

.not-editting .item {
    animation: none;
}

查看此 updated jsFiddle