使用 ng-class 应用 CSS 动画在 IE 中不起作用答案

【问题标题】：Applying CSS animation using ng-class not working in IE使用 ng-class 应用 CSS 动画在 IE 中不起作用
【发布时间】：2017-07-18 08:05:16
【问题描述】：

我对 AngularJS 有一些基本经验，但我绝对是 CCS 动画的初学者。说了这么多，我想把这些东西拼凑起来：

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

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

慢闪和快闪之间的切换不能直接进行，我必须先过“无”，然后才能应用“慢”或“快”。

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

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

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

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：