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-class

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，您需要

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

<强> UPDATED PLUNK

添加效果到ngTable

2 个答案: