0

我最近开始使用 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属性

4

1 回答 1

0

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

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

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

于 2015-12-10T13:33:56.680 回答