javascript - 使用 ngAnimate 和 ngRepeat 以及拼接元素

Question

我正在使用 Angular 和 SignalR 开发一个概念验证 SPA Web 应用程序。我希望我的客户端应用程序使用使用 ngRepeat 生成的 ngAnimate 为插入列表的新元素设置动画。

在我以这种方式插入新元素之前:

signalRhub.client.broadcastData = function (data) {
                    $scope.customers.push(data);
                    $scope.$apply(); 
                };

但现在我想将新元素插入列表顶部而不是底部，并在列表超过五个元素时删除列表的最后一项:

signalRhub.client.broadcastData = function (data) {
                    $scope.customers.splice(0, 0, data);
                    if ($scope.customers.length > 5) { $scope.customers.splice(5, 1); }
                    $scope.$apply(); 
                };

View :

<tr class="customerList" ng-repeat="customer in customers track by $index">
    <td style="font-size:x-large; width:50%">
        {{customers.customerId}}
    </td>
    <td style="font-size:x-large; width:50%">
        {{customers.appointments[0].appointmentId}}
    </td>
</tr>

CSS:

.customerList.ng-enter {
    transition:1s linear all;
    opacity:0;
}
.customerList.ng-enter-active {
    opacity: 1;
}

.customerList.ng-leave-active {
    opacity:0;
}

这样做的问题是，ngAnimate 正在对最后一行进行动画处理，直到由于列表太长而将其从列表中拼接出来。如何仅对拼接在列表开头的新元素进行动画处理？

Answer 1

为列表中的第一项创建一个新类。尝试使用 css3 位置规则来指定第一个子元素。仅对 css 类进行动画处理。