如何使用 ng-animate 在表格行中对指定的表格数据进行动画处理？答案

【问题标题】：How can specified table data be animated within a table row with ng-animate?如何使用 ng-animate 在表格行中对指定的表格数据进行动画处理？
【发布时间】：2014-11-23 21:40:09
【问题描述】：

我正在使用 Angular 的 ng-repeat 生成一个包含多行的表。当用户将鼠标悬停在表格行上时，我想让特定的表格单元格动画。

在下面的示例中，我只想在鼠标悬停时使相应的动画单元格可见（或不透明度：1），但我不希望行改变高度（即行高应该考虑不可见的单元格数据）。

我尝试过 CSS 动画和 ng-animate，但我所有的尝试都为行的相应单元格的所有单元格设置动画（例如，在第二列动画的多行表中，所有当鼠标悬停在表格的任何部分时，第二列中的单元格会做出响应。

Full example available in jsBin includes both Greensock TweenMax and css animation attempts.

相关html（在这个版本中，只有第二列/红色单元格改变可见性/不透明度）：

  <table class="view-container">
     <tr ng-repeat="row in ctrl.rows" 
         ng-click="fadeIt($index)"
         id={{$index}}>
       <td>index #{{($index)}}</td>
       <td class="animation red" hide-me="isHidden")>red background</td>
       <td class="animation blue">blue backgrounds</td>
    </tr>
  </table>

相关js（使用TweenMax）

var app = angular.module('app', ['ngAnimate']);

app.controller('MainCtrl', ['$scope', function ($scope) {

  $scope.isHidden = false;
  $scope.fadeIt = function(id) {
    $scope.isHidden = !$scope.isHidden;
  };
}]);

app.directive("hideMe", function ($animate) {
  return function (scope, element, attrs) {
    scope.$watch(attrs.hideMe, function (newVal) {
      if (newVal) {
        $animate.addClass(element, "fade");
      } else {
        $animate.removeClass(element, "fade");
      }
    });
  };
});

app.animation(".fade", function () {
  return {
    addClass: function (element, className) {
     TweenMax.to(element, 1, {opacity: 0});
    },
    removeClass: function(element, className) {
      TweenMax.to(element, 1, {opacity: 1});
    }
  };
});

【问题讨论】：

标签： javascript html css angularjs gsap

【解决方案1】：

所以我想出了如何做我想做的大部分事情。

关键是：

在我的.animation 类中包含display:block!important;
在每个<td></td> 中放置一个内容<div></div>

将所有样式放在内部<div>而不是上<td>，例如

<td> <!-- no styles on the <td>; nothing between the <td> and <div> -->
    <div class="animation" ng-show="showDiv">
       <!-- all table data goes inside this div -->
    </div>
</td>

我的工作示例可以在这里找到 - http://jsbin.com/wufehu/5/edit?html,css,output

【讨论】：