AngularJS 애니메이션이 작동하지 않는 이유는 무엇입니까?

Question

Angular app는 훌륭하게 작동하지만 애니메이션을 작동시키지 못합니다. 관리자가 사용자를 삭제하면 DB 비동기에서 변경 한 다음 해당 사용자 인덱스를 모델 ($scope.users)에서 제거합니다.

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

가 여기 내 관련 자바 스크립트입니다 : 여기 내 관련 HTML의

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