我有一张桌子,最后一张应该在点击时显示。一切正常,但我需要转换(点击表后应该顺利扩展)。
我的测试表:
<div ng-app="app">
<table>
<thead ng-controller="TestController">
<tr>
<th>
head
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
first
</td>
</tr>
<tr>
<td>
second
</td>
</tr>
<tr ng-show="display">
<td>
third
</td>
</tr>
<tr ng-show="display">
<td>
fourth
</td>
</tr>
<tr ng-show="display">
<td>
fifth
</td>
</tr>
<tr ng-click="display = !display" class="last-color">
<td>
click me
</td>
</tr>
</tbody>
</table>
</div>
CSS:
table {
border: solid 1px;
}
td {
border: solid 2px;
}
.last-color td {
background-color: green;
}
tbody {
transition: height 2s;
}
我在JSFiddle
上的例子答案 0 :(得分:3)
首先,CSS3过渡允许您在给定的持续时间内平滑地(从一个值到另一个值)更改属性值。换句话说,为了看到转换工作,您应该明确地在CSS中指定这两个值。
此外,您无法将高度过渡应用于表格元素(<table>
,<tbody>
,<tr>
,<td>
等。但是,如果您可以使用<div>
元素包装内容,则可以将CSS过渡应用于<div>
元素。