Looking for a way to animate rows entering and leaving a table in my AngularJS app. Check out my progress on CodePen: here
Here's the HTML I'm working with:
<tbody>
<tr class="md-table-row" ng-repeat="row in tableRow">
<td class="md-table-content" ng-repeat="content in tableContent"> {{content}} </td>
</tr>
</tbody>
The CSS involved in the animation is as follows:
.md-table-row.ng-leave.ng-leave-active,
.md-table-row.ng-enter {
-webkit-transition:all linear 1.5s;
transition:all linear 1.5s;
position:absolute;
opacity:0;
left: 20%;
}
.md-table-row.ng-leave,
.md-table-row.ng-enter.ng-enter-active {
-webkit-transition:all linear 1.5s;
transition:all linear 1.5s;
position:absolute;
opacity:1;
left: 0;
}
Encountering a couple of issues:
- Unequal width in cells during the animation
- New cell space applied only after animation completes due to
position:absolutestatement
Seeking suggestions for an elegant enter/leave animation solution for tables (preferably aligned with Material Design principles).
Appreciate any insights!