Javascript 通过“设置元素高度的动画”；“闪烁”；自动获取最终值

我正在尝试将一个元素的高度从预设设置为取决于内部内容的高度（设置的内容

height:auto

）。由于动画不适用于

height:auto

（前往或从）我认为解决方案可能是保存当前高度，在元素上设置

height:auto

，以获得最终高度并保存该高度，然后将元素高度重置为初始高度，然后将其设置为最终高度。用户不会注意到的“闪烁到自动”，最后一次更改应该会产生动画

const containerBlockDiv=document.querySelector（“.container block”）
const childBlockDiv=document.querySelector（'.child block'）
const containercurrenthweight=containerBlockDiv.scrollHeight
containerBlockDiv.style.height='auto'
const containerneweight=containerBlockDiv.scrollHeight
containerBlockDiv.style.height=`${ContainerCurrenthweight}px`
containerBlockDiv.style.height=`${ContainerWeight}px`

。容器块{
显示：内联块；
背景色：红色；
高度：50px；
宽度：20px；
过渡：高度1s；
}
.儿童街区{
显示：内联块；
高度：100px；
}

---

以下是我在我的拼写手册中设置的从0（或任何其他固定值）到

auto的div动画：纯CSS，无JS


div{
最大高度：15px；
溢出：隐藏；
边框：红色虚线1px；
过渡：最大高度0.3s立方贝塞尔（0,1,0,1）；
}
div:悬停{
最大高度：9999px；
过渡：最大高度0.3s立方贝塞尔（1,0,1,0）；
}
有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容
内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容
有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容有些内容内容一些内容一些内容一些内容一些内容一些内容一些内容一些内容一些内容一些内容一些内容一些内容一些内容一些内容一些内容
首先，我很确定转换在通过Javascript设置的样式上不起作用。我将使用JS添加一个类，并使用CSS为该类设置所需的样式。在此处为动画使用
max height
，而不是
height
，然后您可以毫无问题地设置
height:auto
。确实如此@KDSProgrammer，因为它甚至看不到第一个值。它不能从无到有，我的意思是它甚至看不到50px的值。您的脚本在第一次回流之前运行。阅读链接问题中的公认答案和所有链接答案，我想我已经写得够多了。我不喜欢这种方法，因为引用CSS技巧：“除非内容高度与最大高度完全相同，否则过渡长度实际上不会是您指定的长度”。不管怎么说，我问为什么我尝试的方法不起作用，而不是其他方法。