不能運行ngAnimate動畫

UPD：它幾乎解決了，問題是beacouse我在我的div中添加了第二個'class'屬性。現在它是作品，但我仍然無法看到ng-repeat的動畫，現在我有問題N2： 如何使摺疊和消耗時間不同？我希望我的div的崩潰速度快三倍，然後消耗時間。 Current Plank。不能運行ngAnimate動畫

Here is my example

And here is working example from the other SO question (I'm using absolutly the same method!)

我無法找出爲什麼動畫未顯示在NG-重複，也沒有NG秀nither。 HTML：

<body ng-controller="mainCtrl as vm" class="container"> 
    <div ng-repeat="user in vm.users" class="repeat-item"> 
     <my-user-info user="user"></my-user-info> 
    </div> 
    </body>

指令代碼：

angular.module('main').directive('myUserInfo', function(){ 
    var directive = { 
     templateUrl: 'userInfoCard.directive.html', 
     restrict: 'AE', 
     scope: { 
      user: '=' 
     }, 
     controller: ctrl 
    } 
    return directive; 

    function ctrl($scope){ 
     console.log($scope) 
     $scope.knightMe = function(user){ 
      //debugger; 
      user.rank = 'knight'; 
     } 
     $scope.collapse = function(){ 
      $scope.collapsed = !$scope.collapsed; 
     }   
    }

指令模板：

<div class="panel panel-primary"> 
    <div class="panel-heading" ng-click="collapse()"> 
     <h4 class="no-margin"><b>Name:&nbsp;</b>{{user.name}}, <b>Age:&nbsp;</b>{{user.age}}</h4> 
    </div> 
    <div class="panel-body" ng-show="!collapsed" class="fadein fadeout"> 
     <div ng-show="!!user.address"> 
      <h4>Address:</h4> {{user.address.street}} 
      <br /> {{user.address.city}} 
      <br /> {{user.address.country}} 
      <br /> 
     </div> 
     <div ng-show="!!user.friends && (user.friends.length > 0)"> 
      <h4>Friends:</h4> 
      <ul class="friends"> 
       <li ng-repeat="friend in user.friends">{{friend}}</li> 
      </ul> 
     </div> 
     <div ng-show="!!user.rank"><h4>Rank: {{user.rank}}</h4></div> 
     <div ng-show="!user.rank"> 
      <button class="btn btn-success" ng-click="knightMe(user)">Knight Me</button> 
     </div> 
    </div> 
</div>

和CSS：

/* ====================== */ 

.fadein, 
.fadeout { 
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; 
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; 
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; 
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; 
} 

.fadein.ng-hide-remove, 
.fadeout.ng-hide-add.ng-hide-add-active { 
    opacity: 0; 
    display: block !important; 
} 

.fadeout.ng-hide-add, 
.fadein.ng-hide-remove.ng-hide-remove-active { 
    opacity: 1; 
    display: block !important; 
} 

/* ====================== */ 

.repeat-item.ng-enter, 
.repeat-item.ng-leave { 
    -webkit-transition:0.5s linear all; 
    transition:0.5s linear all; 
} 

.repeat-item.ng-enter, 
.repeat-item.ng-leave.ng-leave-active { 
    opacity:0; 
} 
.repeat-item.ng-leave, 
.repeat-item.ng-enter.ng-enter-active { 
    opacity:1; 
}

當ngIf指示它將一個新項目添加到重複列表中時，會生成.ng-enter和.ng-enter-active CSS類並將它們附加到AngularJS的元素中。根據動畫，添加其他CSS類。

來源

2016-10-20 Anton Pegov

變化

<div class="panel-body" ng-show="!collapsed" class="fadein fadeout">

到

<div class="panel-body fadein fadeout" ng-show="!collapsed">

您對DIV兩類聲明。可能你想做ng-class = {'fadein fadeout'：！collapsed}。

工作plunkr：https://plnkr.co/edit/MsgJxp?p=preview

檢查this SO post爲Adding multiple class using ng-class

來源

2016-10-20 15:02:00 Mahesh

Sanks了很多！這是真的是我的錯...... –

順便說一句，現在它是作品，但我仍然不能看到ng-repeat的動畫，現在我有***問題N2 ***： **如何使摺疊和消費時間不同？**我希望我的div的崩潰速度快三倍，當他們消耗時。 –

不能運行ngAnimate動畫

回答

相關問題