我遇到了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
答案 0 :(得分:10)
由于表格单元格的高度是“内容所需的最小高度”(如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>
答案 1 :(得分:0)
它是表行上角度动画的已知问题。 https://github.com/twbs/bootstrap/issues/12593
显示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">
$2.90
</div>
</div>
</td>
</tr>