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

中找到此信息

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

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

无法在嵌套的ng上触发动画重复

1 个答案: