I'm working on highlighting items when they appear in a table. There might be multiple items appearing simultaneously, but it seems like ng-animate is not handling this situation correctly.
In the provided example below, you can observe that the div elements animate smoothly while the table row elements do not display the desired animation.
Check out the Demo Fiddle here
HTML
<table class="animate-appear">
<tr ng-repeat="item in repeatingItems">
<td>{{item}}</td>
<td>{{item}}</td>
</tr>
</table>
CSS (simplified)
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;
}
Notes:
1. The div elements seem to animate correctly which serves as a reference point in the fiddle.
2. Converting table rows to div elements is not an option for me.
3. Adding a slight timeout (even just 30ms) makes subsequent rows animate properly. However, this is not a feasible solution for my problem.
4. My main focus is on the ng-enter animation.
5. I've experimented with applying the animation styles directly to the table rows without success.
Why is this happening? And more importantly, what steps can I take to ensure all new elements in a table animate correctly?