gpt4 book ai didi

javascript - 表扩展的过渡

转载 作者:行者123 更新时间:2023-11-28 18:29:38 26 4
gpt4 key购买 nike

我有一个表格,最后一个表格应该在点击时显示附加内容。一切正常,但我需要一个过渡(单击后表格应该顺利展开)。

我的测试表:

  <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

最佳答案

首先,CSS3 转换允许您在给定的持续时间内平滑地更改属性值(从一个值到另一个值)。换句话说,为了看到过渡有效,您应该在 CSS 中明确指定这两个值。

此外,您不能将高度过渡应用于表格元素( <table><tbody><tr><td> 等)。但是,如果你可以用 <div> 将内容包裹起来元素,您可以将 CSS 过渡应用到 <div>元素。

举个例子:https://jsfiddle.net/r4w1u5or/3/

关于javascript - 表扩展的过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38347496/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com