Question

我最近开始使用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一起使用，但我还没有测试过没有ng-animate的正常动画

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

的转换延迟（但仍然使用动画），也会发生这种情况

如果我从CSS属性中删除延迟，则动画可以正常工作。

我还使用animation-name，animation-duration和animation-delay而不是animation属性进行了测试

Answer 1

我已经在bugzilla上开了一张票，它已经被证实是一个新功能（hiRes dom timestamps）引入的bug，它取代了从44开始的Firefox版本和从49开始的Chrome版本的当前时间戳。 Firefox Developer Edition使用实验版本，而Firefox标准版仅使用稳定版本（最新版本目前为42，不受影响，版本43也是如此）。

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

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

动画延迟firefox开发者版奇怪的行为

1 个答案: