Angular 1.3 动画在 Firefox 中不起作用

Posted 2023-03-06

【中文标题】Angular 1.3 动画在 Firefox 中不起作用

【英文标题】：Angular 1.3 animation not working in firefox

【发布时间】：2014-12-17 03:47:36

【问题描述】：

我们有一个 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

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

【问题讨论】：

听起来你应该提交一个错误@github.com/angular/angular.js/issues

不确定是错误还是我做错了什么。

这可能会对您有所帮助。 ***.com/questions/25964905/…

主要问题来自fadeOutRight效果，如果你通过fadeInRight改变效果就可以看到效果了。

是的，我尝试使用 FFv33.0.2：plnkr.co/edit/pBgf7qxulqdWBeweikzE?p=preview，您只更改了 -webkit-animation 但您需要更改动画：因为 FF 使用 -moz-animation。不知道为什么fadeOutRight 效果不起作用。

【参考方案1】：

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

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

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

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

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

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

上检测到的 javascript 定义的动画

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

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

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

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

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

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

上的 CSS 过渡块

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

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

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

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

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