通过“闪烁”到自动设置动画元素高度以获得最终值[重复]

Question

我正在尝试将元素的高度从预设高度设置为取决于内部内容的高度（height: auto 将设置的高度）。因为动画不适用于height: auto（往返）我认为解决方案可能是保存当前高度，在元素上设置height: auto 以获得最终高度并保存，然后重置元素的高度初始，然后将其设置为最终高度。用户不会注意到“自动闪烁”，最后的更改应该会产生动画。

const containerBlockDiv = document.querySelector('.container-block')
const childBlockDiv = document.querySelector('.child-block')

const containerCurrentHeight = containerBlockDiv.scrollHeight
containerBlockDiv.style.height = 'auto'
const containerNewHeight = containerBlockDiv.scrollHeight
containerBlockDiv.style.height = `${containerCurrentHeight}px`
containerBlockDiv.style.height = `${containerNewHeight}px`

.container-block {
  display: inline-block;
  background-color: red;
  height: 50px;
  width: 20px;
  transition: height 1s;
}

.child-block {
  display: inline-block;
  height: 100px;
}

<div class="container-block">
  <div class="child-block"></div>
</div>

为什么这不起作用？

Answer 1

这是我在我的法术书中将 div 从 0（或任何其他固定值）设置为 auto 的动画：纯 CSS，无 JS

div {
  max-height: 15px;
  overflow: hidden;
  border: red dashed 1px;
  transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
}

div:hover {
  max-height: 9999px;
  transition: max-height 0.3s cubic-bezier(1, 0, 1, 0);
}

<div>Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some
  content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content
  Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content</div>