用css3，如何让表格行慢慢扩展/收缩？

Question

想要在表格中逐渐“打开”和“关闭”一行，下面的行会被适当地向下推或拉。

我可以使用transition进行时间扩展/收缩div，transform进行尺寸调整（无法使用height）

sample.css

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

但这对周围环境没有影响。 h1.squeeze有效地达到0px高度，但h1之后的块保持不变。

我想要的是一种机制，可以扩展/收缩某些内容，例如tr或div或li，并且周围的块响应我的制作室或采取新的空间 - 比如慢动作display: none;。

Answer 1

我制作了一个小提琴here。（添加了点击操作。）

Css代码看起来像

transition:height 2s;

你可以尝试看看我是否理解你想要的东西。

Answer 2

为此，您需要更多代码，因为您无法根据父级大小设置所有子级的大小。像文本和固定大小的东西不会收缩。我建议你用alpha淡入/淡出。