javascript - Angularjs ng-repeat动画与数组中的相同元素

Question

当范围内的数组发生变化时，我使用 angularjs 向表格添加动画。 这是 HTML 代码:

<div ng-app="myapp" ng-controller="myCtrl"> 
        <table>
            <tr ng-repeat="x in items track by $index" class="fade2">                                   
                <td >
                     {{ x }}
                </td>
            </tr>
        </table>
    <button ng-click="add()">add</button>
    <button ng-click="reset()">reset</button>       
</div>

和javascript代码:

var app = angular.module('myapp', ['ngAnimate']);
app.controller('myCtrl', function($scope) {
    $scope.items = ['hello'];

    $scope.add = function() {
        $scope.items.push('hello')
    }

    $scope.reset = function() {
        $scope.items = ['hello','hello','hello','hello'];
    }
});

添加一些 CSS 后，如果我单击“添加”和“重置”按钮，效果很好，但是，当我单击两次重置时，没有动画。实际上数组已更新，但 $scope.items 数组中的元素没有改变。我如何为这种情况添加动画？

Answer 1

我不明白为什么您希望重置每次都具有动画效果，但是 this可以基本做到这一点

$scope.reset = function() {
    $scope.items = [];
    $timeout(function(){
      $scope.items = ['hello','hello','hello','hello'];
    },200);
}