ネストされたngRepeatのアニメーションを起動できません - javascript、css、angularjs、angularjs-ng-repeat、ng-animate

Angularを使用してネストされたngRepeatでアニメーションをトリガーする方法がわかりません。

CSSクラス「.test」がアニメーション化されます。内側のngRepeatで「.test」を使用すると機能しません（プランカ）：

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

外側のngRepeatで「.test」を使用すると機能します（プランカ）：

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

回答：

おそらく、 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 子のそれ以上のアニメーションは無視します。