CODEWITHSUNDEEP
javascriptcssangularjs
Keith
Keith

Reputation: 4204

Why won't my AngularJS animation work?

I have an Angular app running great, but I can't seem to get the animations to work. When an admin deletes a user, it makes the changes in the DB async, then removes that user index from the model ($scope.users). Here's my relevant HTML:

<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>

Here's my relevant Javascript:

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;
            }
        }
    });
};

Here's my relevant CSS:

        .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;
        }

What happens now is that the row simply disappears. That would be fine, but if the admin isn't staring at the screen carefully, of if that row is off the screen, they won't have a visual confirmation of deletion.

I watched the code and noticed that the row wasn't even getting the .animate classes attached to it.

EDIT: I figured it out as I wrote this. I'll close this and post the solution for posterity.

Upvotes: 1

Views: 518

Answers (1)

Keith
Keith

Reputation: 4204

My problem was in this line:

<tr class="userRow" class="animate-repeat" ng-repeat="user in users | orderBy:'last_name'">

I had two "class" attributes. I collapsed them into one and it worked fine.

<tr class="userRow animate-repeat" ng-repeat="user in users | orderBy:'last_name'">

Upvotes: 1

Related Questions