javascript - 使用css3，如何使表格行缓慢扩展/收缩？

Question

想要逐渐“打开”和“关闭”表格中的行，适本地向下推或拉起下面的行。

我能够通过使用 transition 进行计时和使用 transform 进行大小调整来使 div 扩展/收缩(无法使用 height)

示例.css

h1 { transition all 600s linear; }
h1.sqeeze {  transform scale( 1.0, 0.0 ); }

但这对周围环境没有影响。 h1.squeeze 有效地达到了 0px 高度，但是 h1 之后的 block 保持原样。

我想要的是一种可以扩展/收缩某些内容的机制，例如 tr 或 div 或 li，以及周围的 block 响应我腾出的空间或占用新的可用空间 - 如 display: none; 慢动作。

Answer 1

我做了一个 fiddle here .(新增点击操作)

CSS 代码看起来像

transition:height 2s;

你可以试试看我是否明白你的意思。