In this plunk我有一个ngTable
四行。当用户点击桌子下面的按钮时,我需要第二行的背景颜色(不是文本)淡入淡出。该行在淡入时变为着色,但是在两秒钟后,背景颜色突然消失而不是消失。任何想法如何解决这一问题?为ngTable添加效果
CSS
.select {
transition: 1s linear all;
opacity: 1;
}
.select.ng-hide {
transition: 1s linear all;
opacity: 0;
}
HTML
<table ng-table="tableParams" class="table table-bordered table-hover">
<tbody>
<tr ng-repeat="u in data" ng-class="{ 'select': u.select}">
<td title="'User ID'" style="width:150px">{{ u.uid }}</td>
<td title="'Name'" style="width:150px">{{ u.nm }}</td>
<td title="'Group'" style="width:200px">{{ u.ugr }}</td>
</tr>
</tbody>
</table>
<br>
<button ng-click="selectRow()">Color second line and fade</button>
的Javascript
var app = angular.module('app', ['ngTable']);
app.controller('myCtl', function($scope,$timeout,NgTableParams) {
$scope.data = [
{ uid: 'User 11', nm: 'Name 11', ugr: 'Group 1'},
{ uid: 'User 12', nm: 'Name 12', ugr: 'Group 1'},
{ uid: 'User 21', nm: 'Name 21', ugr: 'Group 1'},
{ uid: 'User 22', nm: 'Name 22', ugr: 'Group 1'}
];
$scope.tableParams = new NgTableParams({dataset: $scope.data});
$scope.selectRow = function(){
$scope.data[1].select = true;
$timeout(function(){
$scope.data[1].select = false;
},2000);
};
});
期望是什么?你想淡出缓慢? – Aravind
是的,背景颜色应该淡入淡出 – ps0604