Angular 1.3 动画在 Firefox 中不起作用

Question

我们有一个 ng-repeat 指令，它使用 ng-hide 根据选定的索引进行动画显示和隐藏。动画在除 Firefox 之外的所有浏览器中都能正常工作。

在 Firefox 中，.ng-hide-remove 的动画不起作用。你可以看到它移动一点然后停止。我使用的是 Firefox 版本 33.0 但我也尝试使用 32.0。

这个问题只发生在 Angular 1.3 中，同样的代码在 Firefox 中使用 Angular 1.2 版本。

这是重复代码

 <div class="item" ng-repeat="item in items" ng-show="$index == selectedItem" >
  Item: {{item}}
</div>

这里是css样式：

.item {
  position:absolute;
  top:50px;
  left:200px;
  border:solid 1px black;
  padding:10px;
  background-color:#f5f5f5;
  width:100px;
}

.item.ng-hide-add {
  -webkit-animation: fadeInLeft 1.5s;
  animation: fadeInLeft 1.5s; 
}

.item.ng-hide-remove {
  -webkit-animation: fadeOutRight 1.5s;
  animation: fadeOutRight 1.5s; 
}

这是一个包含完整演示的 plunker： http://plnkr.co/edit/UFI6eWqfnDcCkpIe6d1i?p=preview

任何帮助将不胜感激。我做错了什么还是我遇到了一个真正的角度错误？谢谢！

Answer 1

  .item.ng-hide-remove.ng-hide-remove-active

来自https://docs.angularjs.org/api/ngAnimate/service/$animate

动画步骤元素类属性是什么样子的

1. $animate.animate(...) 被称为 class="my-animation"

2. $animate 等待下一个摘要开始动画 class="my-animation ng-animate"

3. $animate 运行在元素 class="my-animation ng-animate"

上检测到的 JavaScript 定义的动画

4. className 类值被添加到元素 class="my-animation ng-animate className"

5. $animate 扫描元素样式以获取 CSS 过渡/动画持续时间和延迟 class="my-animation ng-animate className"

6. $animate 阻止元素上的所有 CSS 过渡，以确保立即应用 .className 类样式 class="my-animation ng-animate className"

7. $animate 将提供的 CSS 样式集合应用到元素 class="my-animation ng-animate className"

8. $animate 等待单个动画帧（这将执行重排） class="my-animation ng-animate className"

9. $animate 移除放置在元素 class="my-animation ng-animate className"

上的 CSS 过渡块

10.添加了 className-active 类（这会触发 CSS 过渡/动画） class="my-animation ng-animate className className-active"

11. $animate 将 CSS 样式的集合应用于元素，然后由转换 class="my-animation ng-animate className className-active"

12. $animate 等待动画完成（通过事件和超时） class="my-animation ng-animate className className-active"

13. 动画结束，所有生成的 CSS 类都从元素 class="my-animation" 中移除

14. 返回的承诺已解决。 class="我的动画"