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

Question

我无法弄清楚如何使用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>

Answer 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

从文档中找到了这个

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

尽管父重复上没有动画，但似乎ng-animate只是忽略其子节点上的任何进一步动画。