Angularjs 角度引导折叠表行动画未平滑过渡

我遇到了一个关于角度引导折叠指令和CSS的问题。基本上，当您将指令“collapse”添加到div时，它可以正常工作。但是，当您尝试展开/折叠表行时，转换效果似乎有一些问题

HTML:

---

代码笔示例：

由于表格单元格的高度是“内容所需的最小高度”（如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>

宠物细节
关于这只宠物的一些细节。

对于表格行上的角度动画，这是一个已知的问题。

显示了执行此操作的最佳方法

丙烯酸（透明）
{{row1Open}}
福
详细信息行{{demo.hello}
abc
$2.90

谢谢，这对我很有用。我想这是件简单的事，但我不想深究其中。旁注，如果不想显示上边框，可以轻松添加

上边框：0

到

样式属性。这对我也很有效。我想我不知道a

的最小高度。谢谢@保罗·斯卡丁：您好，这个解决方案看起来不错+1，但是如果我想单击该行，随后的行将展开/折叠，该怎么办？我的意思是，假设在上面的例子中，有3列。我们如何在tr中包装这三个变量？@PavanSandeep：只需在

tr

上的每个

td

中使用一个带有

collapsed=“isCollapsed”

的div，Angular将根据

isCollapsed

的真或假来收缩或扩展表行。

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"
        }
    ];
});

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

<tr ng-click="row1Open = !row1Open">
      <td>Acrylic (Transparent)</td>
      <td>{{row1Open}}</td>
      <td>foo</td>
    </tr>
    <tr class="collapse-row">
      <td>
        <div collapse="!row1Open">
          <div class="collapse-cell">
            Detail Row {{demo.hello}}
          </div>
        </div>
      </td>
      <td>
        <div collapse="!row1Open">
          <div class="collapse-cell">
            abc
          </div>
        </div>
      </td>
      <td>
        <div collapse="!row1Open">
          <div class="collapse-cell">
            $2.90
          </div>
        </div>
      </td>
    </tr>