ngTable添加效应

Question

在这个沉重的我有一个四行的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]"

工作普朗克尔

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

原因:要在所需的铬中查看

1. -webkit-过渡
2. 您有opacity:1 for .select，当超时发生时，它将在下一秒更改不透明度。

更新后的凸起