为什么我的AngularJS动画不起作用？

Question

我有一个运行良好的Angular应用程序，但似乎无法使动画正常工作。 管理员删除用户时，它将在数据库异步中进行更改，然后从模型（ $scope.users ）中删除该用户索引。 这是我相关的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>

这是我的相关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;
            }
        }
    });
};

这是我的相关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;
        }

现在发生的是该行完全消失了。 可以，但是如果管理员没有仔细地盯着屏幕，或者如果该行不在屏幕上，则他们将看不到删除的视觉确认。

我看了一下代码，发现该行甚至没有附加.animate类。

---

编辑：我写这篇文章时想通了。 我将关闭它并发布后代解决方案。

Answer 1

我的问题在这一行：

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

我有两个“类”属性。 我将它们折叠成一个，效果很好。

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