Ajout d'un effet à ngTable

Question

In this plunk J'ai un ngTable avec quatre lignes. Lorsque l'utilisateur clique sur le bouton situé sous la table, j'ai besoin que la couleur d'arrière-plan (et non le texte) de la deuxième rangée apparaisse et disparaisse. La ligne devient colorée en fondu, mais après deux secondes, la couleur de fond disparaît soudainement au lieu de s'effacer. Une idée de comment réparer ça?

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

Vous pouvez ajouter un autre css pour désélectionner la ligne

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

} 

alors mis opérateur ternaire dans votre ng classe

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

Working Plunkr

Answer 2

Vous devriez avoir vos styles ci-dessous,

.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; 
} 

Raison: Pour voir en chrome vous avez besoin

1. -webkit transition
2. vous aviez opacity:1 pour .select qui change l'opacité seconde suivante lorsque délai d'attente se produit.

UPDATED PLUNK