Firefox 开发者版出现延迟的动画奇怪行为答案

【问题标题】：Animation with delay in firefox developer edition weird behaviorFirefox 开发者版出现延迟的动画奇怪行为
【发布时间】：2016-03-14 21:41:40
【问题描述】：

我最近开始使用 Firefox 开发者版，我发现动画出现延迟的奇怪行为。

http://plnkr.co/edit/Tr1nd5r0gAyy3eH3Z7Zh?p=preview

.selection-buttons.ng-animate.ng-hide-add {
  animation: 30s linear 1s fadeOutDown;
  opacity: 1;
}

.selection-buttons.ng-animate.ng-hide-remove {
  animation: 30s linear 1s fadeInUp;
  opacity: 0;
}

如果您使用 Firefox Developer 打开此 Plunker，动画将正确播放，但文本将再次隐藏几秒钟然后回来（或者将再次显示几秒钟，然后在您第二次单击时消失)。我已经在其他浏览器（Chrome、Firefox 标准、Safari 和 Pale Moon）中对此进行了测试，动画效果很好。

动画是使用 animate.css 实现的，我在 CSS 中使用了动画名称，以便将它们与 ng-animate from angular 一起使用，但我没有测试没有 ng-animate 的普通动画

我注意到 ng-animate 在动画结束后删除了它的类。我已经计时了，类的移除正好延迟了动画持续时间的一半（如果你增加动画持续时间，延迟会相应增加）所以动画结束但是类添加的其他属性（例如不透明度）被留下直到类被删除。任何延迟值都会发生这种情况，无论设置的值如何，只要动画有延迟它就会执行此操作。令人惊讶的是，即使来自transition 属性或transition-delay 属性的转换延迟（但仍使用动画）也会发生

如果我从 CSS 属性中移除延迟，动画效果会很好。

我还使用animation-name、animation-duration 和animation-delay 代替animation 属性进行了测试

【问题讨论】：

标签： css-animations ng-animate animate.css firefox-developer-edition

【解决方案1】：

我在 bugzilla 上开过一张票，并确认这是一个新功能（hiRes dom 时间戳）引入的错误，它替换了 Firefox 版本从 44 开始和 Chrome 版本从 49 开始的当前时间戳。 Firefox 开发者版使用实验性构建，而 Firefox 标准仅使用稳定版（最新稳定版目前为 42，不受影响，版本 43 也不受影响）。

https://bugzilla.mozilla.org/show_bug.cgi?id=1231619

Angular 团队已收到此错误的通知

【讨论】：