Angular ng-animate 仅对数据更改进行动画处理答案

【问题标题】：Angular ng-animate only animate on data changeAngular ng-animate 仅对数据更改进行动画处理
【发布时间】：2017-01-14 08:03:27
【问题描述】：

我有一个表格，我希望在添加或删除一行时对其进行动画处理。我有一个函数每 2 秒调用一次角度控制器来获取数据。一切正常，但表格每 2 秒动画一次。整件事每 2 秒消失一次。我只希望添加或删除的新行淡入或淡出。这是我的代码。

HTML

<h1>
Scans
</h1>
<body ng-app="myApp" ng-controller="ScansController" >   
    <table id="scansTable" class="table table-striped">
        <thead>
            <tr>
                <th>ScanId</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Time Stamp</th>
            </tr>
            <tr ng-repeat="scan in Scans">
                <td>
                    {{scan.scanId}}
                </td>
                <td>
                    {{scan.firstName}}
                </td>
                <td>
                    {{scan.lastName}}
                </td>
                <td>
                    {{scan.timeStamp}}
                </td>
            </tr>
        </thead>
    </table>

CSS

tr {
opacity: 1;
}
tr.ng-enter {
-webkit-transition: 1s;
transition: 1s;
opacity: 0;
}
tr.ng-enter-active {
opacity: 1;
}

</style>

控制器

var myApp = angular.module('myApp', ['ngAnimate']);

myApp.service('dataService', function ($http) {

this.getData = function () {

    return $http({
        method: 'GET',
        url: '/api/scans/'
    });
}
});

myApp.controller('ScansController', function ($scope, dataService, $timeout) {

$scope.Scans = [];

function fetchData() {
    dataService.getData().then(function (result) {
        $scope.Scans = result.data;
        $timeout(function () { fetchData(); }, 2000);
    });
}

fetchData();

});

【问题讨论】：

您是否在模块中加载了ngAnimate 作为依赖项？例如angular.module('app', ['ngAnimate']);
@papakia 我以前没有，但我只是添加了它，它仍然没有动画。
how to use animation with ng-repeat in angularjs的可能重复
@papakia 是的，这解决了动画，但是有一个新问题。问题已更新。

标签： angularjs

【解决方案1】：

我将控制器修改为以下，并摆脱了动画 css。现在我的表格只在数据变化时产生动画，但这只是在数组长度不同的情况下。

var myApp = angular.module('myApp', []);

myApp.service('dataService', function ($http) {

this.getData = function () {

    return $http({
        method: 'GET',
        url: '/api/scans/'
    });
}
});

myApp.controller('ScansController', function ($scope, dataService, $timeout) {

$scope.Scans = [];
$scope.NewScans = [];

function fetchData() {
    dataService.getData().then(function (result) {

        $scope.Scans = result.data;
        $("#scansTable").removeClass('animated bounceIn');           
    });
}

function fetchNewData() {
    dataService.getData().then(function (result) {

        $scope.NewScans = result.data;

        if ($scope.Scans.length != $scope.NewScans.length)
        {               
            $("#scansTable").addClass('animated bounceIn');
            $scope.Scans = $scope.NewScans              
        }

        $timeout(function () { fetchNewData(); }, 1000);
    });
}

fetchData();
fetchNewData();

});

【讨论】：

【解决方案2】：

我建议使用合并。

改变这一行：

$scope.NewScans = result.data;

到：

angular.merge($scope.NewScans, result.data);

这样做，您将保留对 $scope.NewScans 的引用，并且只有其更改的内容才能获得更新。

【讨论】：