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保持原样。

我想要的是一种可以扩展/收缩的机制，例如trordiv或li，并且周围的块响应我的制造空间或通过占用新可用的空间 - 就像display: none;慢动作一样。

Answer 1

我在这里做了一个小提琴。（添加了点击操作。）

CSS代码看起来像

transition:height 2s;

你可以试试看我是否明白你想要什么。

Answer 2

要做到这一点，你需要更多的代码，因为你不能根据父大小设置所有孩子的大小。文本和固定大小等内容不会收缩。我建议您改用 alpha 淡入/淡出。