twitter-bootstrap angular-bootstrap 折叠表行动画不能平滑过渡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28567428/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angular-bootstrap collapse table row animation not transitioning smoothly
提问by codeMonkey
I'm running into an issue with angular-bootstrap collapse directive and CSS. Basically when you add the directive "collapse" to a div it works fine. But when you try to expand/collapse a table row it seems to have some issues with the transition effect.
我遇到了 angular-bootstrap 折叠指令和 CSS 的问题。基本上，当您将指令“折叠”添加到 div 时，它工作正常。但是当您尝试展开/折叠表格行时，过渡效果似乎存在一些问题。
HTML:
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>
Controller:
控制器：
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 Example: http://codepen.io/anon/pen/qEoOBq
Codepen 示例：http://codepen.io/anon/pen/qEoOBq
采纳答案by Paulo Scardine
Since the height of a table cell is “the minimum height required by the content” (as in CSS 2.1 rules) I guess you can't animate the table row height.
由于表格单元格的高度是“内容所需的最小高度”（如 CSS 2.1 规则中所示），我猜您不能为表格行高设置动画。
Probably the workaround involves wrapping the content of the cell into a divelement and animating this container as well.
可能的解决方法是将单元格的内容包装到一个div元素中，并为此容器设置动画。
This worked for me but I have not tested heavily:
这对我有用，但我没有进行大量测试：
<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>
回答by Manas
Its a known issue for angular animations on table rows. https://github.com/twbs/bootstrap/issues/12593
它是表格行上角度动画的已知问题。 https://github.com/twbs/bootstrap/issues/12593
The best way to do it is shown here.
<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">
.90
</div>
</div>
</td>
</tr>
