爲ngTable添加效果

Question

In this plunk我有一個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); 
    }; 

}); 

Answer 1

您可以添加其他的CSS不選行

.unselect { 
    background-color: transparent; 
    transition: 1s linear all; 

} 

然後把三元運營商在NG-類

ng-class="{true: 'select', false: 'unselect'}[u.select]" 

Working Plunkr

Answer 2

你必須有自己的風格，如下，

.select { 

    -webkit-transition: opacity 2s; /* For Safari 3.1 to 6.0 */ 
    transition: opacity 2s; 
    opacity: 0.5; 
} 

.select.ng-hide { 

    -webkit-transition: opacity 2s; /* For Safari 3.1 to 6.0 */ 
    transition: opacity 2s; 
    opacity: 0; 
} 

原因：要在Chrome中看到您需要

1. -webkit-過渡
2. 你有opacity:1的。選擇這改變下一秒當發生超時的不透明度。

UPDATED PLUNK