Javascript 设置在表格行上显示的动画

在切换

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>

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

.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;
}

CSS动画代码如下所示：

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

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

.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;
}

试试这个：

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

员工信息

---

这里有一个工作（示例）

添加到OP:v1.3.0-rc.5谢谢。它现在可以设置动画，但是由于显示：块的原因，

colspan=“5”

没有任何作用，因此它不会平滑显示。你可以在这里看到。谢谢你的更新，但是我可以只显示行而不将列向右移动吗？@Gaui仍然不走运，我正在努力解决这个问题。