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

Question

我正在使用 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});
    }
  };
});

Answer 1

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

关键是:

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

• 将所有样式放在内部 <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