Question

我有一个表，我希望在添加或删除行时设置动画。我有一个函数每2秒调用一个角度控制器来获取数据。一切正常，但桌子每2秒钟动画一次。整个事情每2秒消失一次。我想只添加或删除新行淡入或淡出。这是我的代码。

HTML

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

</style>

CSS

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();

});

控制器

{{1}}

Answer 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();

});

Answer 2

我建议使用合并。

更改此行：

$scope.NewScans = result.data;

为：

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

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

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

2 个答案: