无法在嵌套的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只是忽略了其子节点上的任何动画.