ng-animieren mehrere Tabellenzeilen animieren nicht

Question

Ich versuche zu hilight, wenn Elemente in einer Tabelle angezeigt werden. Es können 2, 3 oder mehr Elemente gleichzeitig angezeigt werden. Jedoch ng-animate tut nicht scheint dies richtig zu behandeln.

In der folgenden Geige können Sie einen Arbeitsanwendungsfall von Tabellenzeilen (neben einem Beispiel mit div-Elementen) sehen. Die div-Elemente werden richtig animiert. Die Tabellenzeilenelemente nicht.

Demo Fiddle

HTML

<table class="animate-appear"> 
    <tr ng-repeat="item in repeatingItems"> 
    <td>{{item}}</td> 
    <td>{{item}}</td> 
    </tr> 
</table> 

CSS (vereinfacht)

table.animate-appear tr td { 
    padding: 5px 10px; 
    transition: all 1s ease; 
    opacity: 1; 
} 

table.animate-appear .ng-enter td, 
table.animate-appear .ng-leave.ng-leave-active td, 
table.animate-appear .ng-move td { 
    opacity: 0; 
    background-color: yellow; 
} 

table.animate-appear .ng-enter.ng-enter-active td, 
table.animate-appear .ng-leave td, 
table.animate-appear .ng-move.ng-move-active td { 
    opacity: 1; 
    background-color: white; 
} 

Hinweise:
1. Die div Elemente richtig animieren erscheinen. Das ist in der Geige für einen Vergleichspunkt enthalten.
2. Die Tabellenzeilen können nicht in div-Elemente geändert werden.
3. Ein kleiner Timeout (in meinem Test nur 30 ms) bewirkt, dass die nachfolgenden Zeilen richtig animiert werden. Dies ist keine praktikable Lösung zu meinem Problem, jedoch. 4. Ich bin nur mit der ng-enter Animation betroffen. 5. Ich habe versucht, die Animationsstile ohne Erfolg auf die Tabellenzeile anzuwenden.

Warum passiert das? Was kann ich noch tun, damit alle neuen Elemente in einer Tabelle richtig animiert werden?

Answer 1

Die CSS-Animation für Ihre Tabelle verursacht einen Konflikt, da sie sowohl auf die Zeile als auch auf die Zelle angewendet wird. Wenn Sie die CSS so ändern, dass die Animation nur für die Zeile gilt, sollte die Animation korrekt sein.

table.animate-appear tr { 
    transition: all 1s ease; 
    opacity: 1; 
} 

table.animate-appear td { 
    padding: 5px 10px; 
    opacity: 1; 
} 

table.animate-appear .ng-enter, 
table.animate-appear .ng-move { 
    opacity: 0; 
    background-color: yellow; 
} 

table.animate-appear .ng-enter.ng-enter-active, 
table.animate-appear .ng-leave, 
table.animate-appear .ng-move.ng-move-active { 
    opacity: 1; 
    background-color: white; 
}