Angular ng-animate 仅对数据更改进行动画处理
Posted
技术标签:
【中文标题】Angular ng-animate 仅对数据更改进行动画处理【英文标题】：Angular ng-animate only animate on data change 【发布时间】：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 是的，这解决了动画，但是有一个新问题。问题已更新。
【参考方案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 的引用，并且只有其更改的内容才能获得更新。
【讨论】：
以上是关于Angular ng-animate 仅对数据更改进行动画处理的主要内容，如果未能解决你的问题，请参考以下文章