在表格行上动画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