在表格行上動畫ng顯示

Question

我試圖在切換ng-show時上下滑動表格行。我使用AngularJS v1.3.0-rc.5，並在我的應用中包含ngAnimation模塊，但它總是切換，不動畫。難道我做錯了什麼？

的HTML代碼如下：

<tbody> 
    <tr data-ng-repeat-start="employee in stafflist" ng-init="isToggled[$index]"> 
     <td><a href="#" data-ng-click="toggleEmployee($index)">{{employee.FULLNAME}}</a></td> 
     <td>{{employee.WORKPHONE}}</td> 
     <td>{{employee.OFFICE}}</td> 
     <td>{{employee.DEPARTMENT}}</td> 
     <td>{{employee.COUNTRY}}</td> 
    </tr> 
    <tr data-ng-repeat-end data-ng-show="isToggled[$index]" class="animate-show"> 
     <td colspan="5"> 
      <div class="employeeInfo"> 
       <img ng-src="EmployeeImage.aspx?p={{employee.PHOTOURL}}" /> 
       Employee info 
      </div> 
     </td> 
    </tr> 
</tbody> 

的JavaScript的觸發是非常基本的，是以下幾點：

$scope.isToggled = []; 
$scope.toggleEmployee = function (id) { 
    $scope.isToggled[id] = !$scope.isToggled[id]; 
}; 

的CSS動畫代碼如下：

.animate-show { 
    line-height:40px; 
    list-style:none; 
    box-sizing:border-box; 
} 

.animate-show.ng-move, 
.animate-show.ng-enter, 
.animate-show.ng-leave { 
    -webkit-transition:all linear 0.5s; 
    transition:all linear 0.5s; 
} 

.animate-show.ng-leave.ng-leave-active, 
.animate-show.ng-move, 
.animate-show.ng-enter { 
    opacity:0; 
    max-height:0; 
} 

.animate-show.ng-leave, 
.animate-show.ng-move.ng-move-active, 
.animate-show.ng-enter.ng-enter-active { 
    opacity:1; 
    max-height:40px; 
} 

Answer 1

試試這個：

<tr data-ng-repeat-end ng-animate-children> 
    <td colspan="5" data-ng-show="isToggled[$index]" class="animate-show"> 
     <div class="employeeInfo"> 
      <img ng-src="EmployeeImage.aspx?p={{employee.PHOTOURL}}" /> 
      Employee info 
     </div> 
    </td> 
</tr> 

這裏的工作（例如）plnkr