爲什麼我的AngularJS動畫不能工作？

我有一個Angular應用程序運行良好，但我似乎無法使動畫工作。當管理員刪除用戶時，它會對數據庫異步進行更改，然後從模型中刪除該用戶索引（$scope.users）。這裏是我的相關HTML：爲什麼我的AngularJS動畫不能工作？

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

編輯：我想通了，因爲我寫這個。我會關閉它併發布後代的解決方案。

來源

2014-01-06 Prodikl

我的問題是在這條線：

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

來源

2014-01-06 08:53:13 Prodikl

感謝您發佈您的修復程序，它幫助我。你可以發表任何你曾經弄清楚的鏈接，我想多瞭解一些。 –

這只是因爲我在第一個例子中有'class =「」'兩次。我想通過代碼來梳理它 – Prodikl

爲什麼我的AngularJS動畫不能工作？

回答

相關問題