angular-bootstrap折叠表行动画没有顺利过渡

Question

我遇到了angular-bootstrap collapse指令和CSS的问题.基本上,当您将指令"collapse"添加到div时,它可以正常工作.但是当您尝试展开/折叠表格行时,似乎存在转换效果的一些问题.

HTML:

<div ng-controller="dogCtrl">
  <table class="table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Breed</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat-start="dog in dogs">
        <td><a href="#" ng-click="isCollapsed = !isCollapsed">{{dog.name}}</a></td>
        <td>{{dog.breed}}</td>
      </tr>
      <tr collapse="isCollapsed" ng-repeat-end="">
        <td colspan="3">
          <h3>Pet details</h3>
          <p>some details about this pet.</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>

控制器:

var app = angular.module('dogApp', ['ui.bootstrap']);
app.controller('dogCtrl', function($scope) {
    $scope.isCollapsed = true;
    $scope.dogs = [
        {
            name: "Sparky",
            breed: "Parson Russell Terrier"
        }, {
            name: "Shep",
            breed: "German Shepard"
        }
    ];
});

Codepen示例:http://codepen.io/anon/pen/qEoOBq

Answer 1

由于表格单元格的高度是"内容所需的最小高度"(如CSS 2.1规则中所示),我猜你无法为表格行高度设置动画.

可能的解决方法是将单元格的内容包装到div元素中,并为此容器设置动画.

这对我有用,但我没有测试过:

      <tr ng-repeat-end="">
        <td colspan="2" style="padding: 0">
          <div collapse="isCollapsed">
            <h3>Pet details</h3>
            <p>some details about this pet.</p>                
          </div>
        </td>
      </tr>