无法在嵌套的 ngRepeat 上触发动画

Posted 2023-03-06

【中文标题】无法在嵌套的 ngRepeat 上触发动画

【英文标题】：Can't trigger animation on nested ngRepeat

【发布时间】：2014-10-06 21:25:45

【问题描述】：

我不知道如何使用 Angular 在嵌套的 ngRepeat 上触发动画。

CSS 类“.test”是动画的。在内部 ngRepeat 上使用“.test”时，它不起作用（Plunker）：

<div ng-repeat="section in sections">
  <div ng-repeat="item in section.items" class="test">
    <h2>item.title</h2>
  </div>
</div>

在外部 ngRepeat 上使用“.test”时，它确实有效 (Plunker)：

<div ng-repeat="section in sections">
  <div ng-repeat="item in section.items" class="test">
    <h2>item.title</h2>
  </div>
</div>

【问题讨论】：

你试过把class改成ng-class吗？

@RichardTorcato 只是将“class”切换为“ng-class”？这应该没有帮助，因为它与“ng-repeat”无关。

@PSL 内部的 ng-repeat 没有动画。如果你对内部和外部 ng-repeat 使用不同的动画，你可以在这里查看plnkr.co/edit/506fyYc7fgsvEcXmlgpd?p=preview。

@Pipo“动画”是一个广义的动画，可以通过多种方式完成。你在寻找什么......还有很多在线角度动画的例子

试试这个..plnkr.co/edit/k6JdVy?p=preview需要在父节点上添加ng-animate-children

【参考方案1】：

您可能需要在父容器上添加ngAnimateChildren 属性，并更新css。

试试：-

<div ng-repeat="section in sections" ng-animate-children>
  <div ng-repeat="item in section.items" class="test">
    <h2>item.title</h2>
  </div>
</div>

和

.test.ng-move,
.test.ng-enter,
.test.ng-leave 
  -webkit-transition: all 0.3s  ease-out;
    transition: all 0.3s  ease-out;


.test.ng-leave.ng-leave-active,
.test.ng-move,
.test.ng-enter 
   opacity:0;
   -webkit-transform: translate(-20px, 0);
    transform: translate(-20px, 0);


.test.ng-leave,
.test.ng-move.ng-move-active,
.test.ng-enter.ng-enter-active 
 opacity:1;
   -webkit-transform: translate(0, 0);
    transform: translate(0, 0);

Plnkr

从doc找到这个

请记住，默认情况下，如果动画正在运行，则在父元素的动画完成之前，任何子元素都无法动画。可以通过将 ng-animate-children 属性放在父容器标记上来覆盖此阻止功能。

即使父级重复上没有动画，ng-animate 似乎只是忽略了其子级上的任何进一步动画。

【讨论】：

哇，以前从未听说过 ng-animate-children。我以前从未在文档中看到过这一点。这绝对解决了问题。非常感谢。