CSS SNIPPET

  返回

高度过渡动画  动画效果

height未知的元素的高度从0动画过渡到auto

HTML
<div class="trigger">
  Hover me to see a height transition.
  <div class="el">content</div>
</div>
CSS
.el {
  transition: max-height 0.5s;
  overflow: hidden;
  max-height: 0;
}

.trigger:hover > .el {
  max-height: var(--max-height);
}
JavaScript
var el = document.querySelector('.el')
var height = el.scrollHeight
el.style.setProperty('--max-height', height + 'px')
效果演示
Hover me to see a height transition.
content
代码说明
  1. transition: max-height: 0.5s cubic-bezier(...) 声明了变化到max-height 需要0.5秒,使用 ease-out-quint 时间函数。
  2. overflow: hidden 禁止隐藏元素的内容溢出其容器。
  3. max-height: 0 声明了元素没有初始高度。
  4. .target:hover > .el 表示当鼠标悬停父元素时,选中其.el子节点并使用 JavaScript定义的--max-height 变量。

  1. el.scrollHeight 是元素包含溢出的高度,它基于元素的内容而动态变化。
  2. el.style.setProperty(...) 设置--max-height CSS 变量,用于指定当鼠标悬停 父元素时该元素的max-height,从而让其高度从0平滑过渡到auto。
浏览器支持

96.5%

需要JavaScript
⚠️ 在动画每一帧都会引起页面的重新排版,如果在动画元素下面有大量其他元素的 话会导致页面变慢。