Adding effect to ngTable

Question

In this plunk I have an ngTable with four rows. When the user clicks the button below the table, I need the background color (not the text) of the second row to fade in and fade out. The row gets colored in fade in, however after two seconds the background color suddenly disappears instead of fading out. Any ideas how to fix this?

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

You can add another css to unselect the row

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

}

then put ternary operator in your ng-class

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

Working Plunkr