Animation kann nicht auf verschachteltem ngRepeat ausgelöst werden - Javascript, css, anglejs, anglejs-ng-repeat, ng-animieren

Ich kann nicht herausfinden, wie Animationen in einem verschachtelten ngRepeat mit Angular ausgelöst werden.

Die CSS-Klasse ".test" ist animiert. Wenn ".test" für das innere ngRepeat verwendet wird, funktioniert es nicht (Plunker):

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

Bei Verwendung von ".test" auf dem äußeren ngRepeat funktioniert es (Plunker):

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

Antworten:

Sie müssen wahrscheinlich hinzufügen ngAnimateChildren Attribut für den übergeordneten Container, und aktualisieren Sie auch die CSS.

Versuchen:-

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

und

.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

Fand dies aus dem Dok

Beachten Sie, dass standardmäßig eine Animation vorhanden istWenn ausgeführt wird, können untergeordnete Elemente erst animiert werden, wenn die Animation des übergeordneten Elements abgeschlossen ist. Diese Blockierungsfunktion kann überschrieben werden, indem das Attribut ng-animate-children auf einem übergeordneten Container-Tag platziert wird.

Obwohl es keine Animation für die übergeordnete Wiederholung gibt, scheint es so ng-animate ignoriert einfach weitere Animationen seiner Kinder.