Javascript 为什么CSS动画即使在移除类名后仍继续播放？

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

我添加了一个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中运行良好，但在InternetExplorer中，即使在移除类之后，动画仍会继续播放

奇怪的是，再点击两次按钮就会停止IE中的动画

参见jsFiddle

---

以前有没有人经历过这种情况？

删除类名后，Internet Explorer似乎没有正确注册动画

作为修复，我添加了一个

notediting

类名来抵消

editing

动画

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

通过将此功能与CSS一起添加，我可以使Internet Explorer按预期运行

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

---

请参阅此JSFIDLE

删除类名后，Internet Explorer似乎没有正确注册动画

作为修复，我添加了一个

notediting

类名来抵消

editing

动画

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

通过将此功能与CSS一起添加，我可以使Internet Explorer按预期运行

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

---

看这个JSFIDLE

Hmm有趣。我想说的是，它没有正确地在IE中实现，因为第2项的功能对我来说是应该的，而另一项需要额外的2次点击。一个可能永远无法修复的bug。实际上@Jackson可以帮助我的上一点，在IE中选择

检查元素

，选择

，然后单击按钮。所有的功能都应该是。。。。（至少对我来说）@CalvT是的，它似乎工作得很好。看起来这只是个讨厌的家伙，嗯，很有趣。我想说的是，它没有正确地在IE中实现，因为第2项的功能对我来说是应该的，而另一项需要额外的2次点击。一个可能永远无法修复的bug。实际上@Jackson可以帮助我的上一点，在IE中选择

检查元素

，选择

，然后单击按钮。所有的功能都应该是。。。。（至少对我来说）@CalvT是的，它似乎工作得很好。看起来这只是一个讨厌的IE bug