I've been facing an issue with the animations in my Angular app. Whenever an admin deletes a user, the changes are made asynchronously in the database and the corresponding user index is removed from the model $scope.users. Below is the relevant snippet of HTML code:
<tbody>
<tr class="userRow" class="animate-repeat" ng-repeat="user in users | orderBy:'last_name'">
<td ng-repeat="value in user">{{value}}</td>
<td><button class="deleteUser"
ng-click="deleteUser(user.user_id)">Delete</button></td>
</tr>
</tbody>
Also, here's the relevant JavaScript snippet:
angular.module("Dashboard",['ngAnimate']); // plus directives that work fine
$scope.deleteUser = function(user_id){
$http({
method: 'POST',
url: $scope.deleteUrl,
data: {user_id: user_id}
}).success(function(data, status){
for(var i = 0; i < $scope.users.length; i++){
if($scope.users[i].user_id == user_id){
$scope.users.splice(i, 1);
break;
}
}
});
};
Next, here's the relevant CSS code snippet:
.animate-repeat.ng-leave.ng-leave-active,
.animate-repeat.ng-move,
.animate-repeat.ng-enter {
opacity:0;
max-height:0;
}
.animate-repeat.ng-leave,
.animate-repeat.ng-move.ng-move-active,
.animate-repeat.ng-enter.ng-enter-active {
opacity:1;
max-height:40px;
}
.animate-repeat.ng-move,
.animate-repeat.ng-enter,
.animate-repeat.ng-leave {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
}
Currently, when a row is deleted, it simply disappears without any visual confirmation for the admin. This could be problematic if the admin isn't actively watching the screen.
Upon inspecting the code, I noticed that the row wasn't associated with the .animate classes.
UPDATE: While writing this post, I was able to figure out the solution. I'll close this now and share the solution for future reference.