javascript - 无法在嵌套的 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

从 doc 找到这个

Keep in mind that, by default, if an animation is running, any child elements cannot be animated until the parent element's animation has completed. This blocking feature can be overridden by placing the ng-animate-children attribute on a parent container tag.

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