Html CSS-许多自动大小容器的转换

我目前正在为显示生成内容的网页编写一些代码。用类

块

命名的主容器包含另一个容器，分别命名为

容器

。容器内部有多个元素，命名为

object

两个容器都有一个

高度：autoCSS设置，因为高度取决于内部内容。这个网站的视觉效果是我非常喜欢的，我想用一种过渡效果使容器能够平稳地改变高度，而不是像通常那样瞬间改变高度

查看此文档以获得代码/视觉透视图

单击标有“添加新对象”的按钮以查看默认效果。如何实现两个容器的平滑高度变化

非常感谢。
CSS无法在
auto
值之间设置动画。您需要做的是使用JavaScript设置
.block
元素的初始
高度，然后在添加每个
.object
元素时对其进行更新。下面是一个例子（为它的粗糙性道歉，时间有点紧迫。它至少应该为你指明正确的方向）：


var span=document.createElement（“span”），
block=document.querySelector（“.block”），
容器=document.querySelector（“.container”）；
span.classList.add（“对象”）；
block.style.height=container.offsetHeight+px；
document.querySelector（“body>span”）.addEventListener（“单击”，函数）（）{
container.appendChild（span.cloneNode（0））；
block.style.height=container.offsetHeight+px；
},0);
span{
位置：绝对位置；
填充物：5px；
左：5px；
顶部：5px；
背景色：#fff；
边框：1px实心rgba（0,0,0,0.15）；
光标：指针；
}
.街区{
位置：绝对位置；
宽度：360px；
背景色：rgba（255,0,255,0.1）；
左：50%；
溢出：隐藏；
最高：50%；
垫底：10px；
左边距：-200px；
利润上限：-150px；
过渡：高度0.25s；
}
.集装箱{
位置：相对位置；
宽度：计算（100%-40px）；
高度：自动；
最小高度：10px；
左：20px；
顶部：5px；
背景色：rgba（255,0,0,0.15）；
字体大小：0px；
垫底：10px；
过渡：0.25s；
}
.反对{
位置：相对位置；
宽度：80px；
高度：80px；
保证金：5px；
显示：内联块；
背景色：#f0f；
}

添加新对象
CSS无法在
auto
值之间或从中设置动画。您需要做的是使用JavaScript设置
.block
元素的初始
高度，然后在添加每个
.object
元素时对其进行更新。下面是一个例子（为它的粗糙性道歉，时间有点紧迫。它至少应该为你指明正确的方向）：


var span=document.createElement（“span”），
block=document.querySelector（“.block”），
容器=document.querySelector（“.container”）；
span.classList.add（“对象”）；
block.style.height=container.offsetHeight+px；
document.querySelector（“body>span”）.addEventListener（“单击”，函数）（）{
container.appendChild（span.cloneNode（0））；
block.style.height=container.offsetHeight+px；
},0);
span{
位置：绝对位置；
填充物：5px；
左：5px；
顶部：5px；
背景色：#fff；
边框：1px实心rgba（0,0,0,0.15）；
光标：指针；
}
.街区{
位置：绝对位置；
宽度：360px；
背景色：rgba（255,0,255,0.1）；
左：50%；
溢出：隐藏；
最高：50%；
垫底：10px；
左边距：-200px；
利润上限：-150px；
过渡：高度0.25s；
}
.集装箱{
位置：相对位置；
宽度：计算（100%-40px）；
高度：自动；
最小高度：10px；
左：20px；
顶部：5px；
背景色：rgba（255,0,0,0.15）；
字体大小：0px；
垫底：10px；
过渡：0.25s；
}
.反对{
位置：相对位置；
宽度：80px；
高度：80px；
保证金：5px；
显示：内联块；
背景色：#f0f；
}

添加新对象
我担心JS会是答案。谢谢你的帮助！非常感谢。欢迎：）如果您已经在使用JS添加
.object
元素，那么使用它设置
高度也没什么大不了的。我担心JS会是答案。谢谢你的帮助！非常感谢。欢迎：）如果您已经在使用JS添加
.object
元素，那么使用它来设置
高度也没什么大不了的。