动画扩展/缩小表
问题描述:
现在,下面的代码显示了一个包含点击时展开/收缩的行的表格。我希望每行都能在点击时将内容向下滑动。我该怎么做呢?动画扩展/缩小表
function MyCtrl($scope) {
$scope.environment_service_packages =
[
{name: 'Click to expand', info: {text: 'some extra info', show: false}},
{name: 'obj2', info: {text: 'some extra info for obj2', show: false}},
];
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app>
<table ng-controller="MyCtrl" class="table table-hover table-striped">
<tr class="info">
<td>...</td>
</tr>
<tbody ng-repeat="x in environment_service_packages">
<tr ng-click="x.info.show = !x.info.show">
<td> {{ x.name }}
</tr>
<tr ng-show="x.info.show">
<td>
{{ x.info.text }}
</td>
</tr>
</tbody>
</table>
</body>
答
试试这个。我只是添加了淡入淡出。尝试一些其他效果,看看它的作品。
礼貌这真棒库(animate.css)https://daneden.github.io/animate.css/]
function MyCtrl($scope) {
$scope.environment_service_packages = [{
name: 'Click to expand',
info: {
text: 'some extra info',
show: false
}
}, {
name: 'obj2',
info: {
text: 'some extra info for obj2',
show: false
}
}, ];
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<body ng-app>
<table ng-controller="MyCtrl" class="table table-hover table-striped">
<tr class="info">
<td>...</td>
</tr>
<tbody ng-repeat="x in environment_service_packages">
<tr ng-click="x.info.show = !x.info.show">
<td>{{ x.name }}
</tr>
<tr ng-show="x.info.show" class="animated fadeIn">
<td>
{{ x.info.text }}
</td>
</tr>
</tbody>
</table>
</body>
有关使文本和表格滑下的其余部分是什么? – Jez
为此,您可以使用ng-class并根据条件为其添加特定的动画样式。就像我想你在展开/折叠时想要上移或下滑一样 – Srijith