为 ngTable 添加效果

Question

In this plunk 我有一个有四行的 ngTable。当用户点击table下面的按钮时，我需要第二行的背景色（不是文字）淡入淡出。该行在淡入时着色，但两秒钟后背景颜色突然消失而不是淡出。有什么解决办法吗？

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

你应该有如下风格，

.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 中看到您需要

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

UPDATED PLUNK

Answer 2

您可以添加另一个 css 以取消选择该行

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

}

然后将三元运算符放入您的 ng-class

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

Working Plunkr

为 ngTable 添加效果

Adding effect to ngTable

angularjs

ngtable