我遇到了 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>
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 示例:http://codepen.io/anon/pen/qEoOBq
最佳答案
由于表格单元格的高度是“内容所需的最小高度”(如 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>
关于angularjs - Angular Bootstrap 折叠表行动画过渡不顺畅,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28567428/