使用 ng-class 应用 CSS 动画在 IE 中不工作

Applying CSS animation using ng-class not working in IE

我有一些 AngularJS 的基本经验，但我是 CCS 动画的绝对初学者。话虽如此，我正在尝试将这些东西拼凑在一起：

在 CSS 中，我定义了 2 个不同的 "blink animation" 类：.blink-anim-slow 和 .blink-anim-fast 指的是相同的 @keyframes 定义，但持续时间不同
使用 3 个单选按钮，您可以为 <div> 选择动画：none / 慢速闪烁 / 快速闪烁
简单 <div> 具有 ng-class 属性以应用不同的动画

在 Chrome 和 Firefox 中一切正常。但是，在 IE11 中，我得到了这种特殊行为：

慢闪和快闪不能直接切换，我得先过一遍"none"，然后才能应用"slow"或"fast"。

现在我有点困惑我的错误在哪里... CSS 或 Angular 相关？

我阅读了有关媒体查询和 IE 的内容，但我没有使用它。我不确定我是否需要为此使用 ngAnimate...但对于这样一个简单的用例可能不需要。

非常感谢您指导我正确的方向或更新 plunkr！

好吧，我找到了解决这个问题的方法，但我不知道这是否是 IE 错误的解决方法，或者是否真的必须这样做。

事实是： 当我使用 两个单独的 @keyframes 定义时 (一种用于慢速闪烁，一种用于快速闪烁），在所有 3 种经过测试的浏览器中一切正常。

我仍然不是 CSS 大师，但对我来说，将相同的 @keyframes 定义两次只是使用不同的名称是没有意义的。但是，当引用具有不同动画持续时间的 @keyframes 时，真正的区别会在稍后出现。

如果您对此了解更多，请发表评论。谢谢！