CSS 动画 - 高度变化时的过渡效果

2019-08-09

描述

在一个元素高度不确定的情况下，为其做一个高度从 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')

Demo

说明

CSS

1. transition: max-height: 0.5s cubic-bezier(...) 表示当 max-height 变化时需使用 ease-out-quint 时间函数让其持续 0.5 秒的过渡效果
2. overflow: hidden 阻止隐藏元素的内容从他的容器中溢出
3. max-height: 0 specifies that the element has no height initially.
4. .target:hover > .el specifies that when the parent is hovered over, target a child .el within it and use the --max-height variable which was defined by JavaScript.

JavaScript

1. el.scrollHeight 一个元素包含溢出部分的高度，他会根据元素内容进行动态的变化
2. el.style.setProperty(...) 用于设置 CSS 变量 --max-height，可以指定当鼠标移动到元素上时该元素的 max-height，进而实现从 0 到 auto 的过渡效果

浏览器支持

支持率：91.6%
支持情况：

• https://caniuse.com/#feat=css-variables
• https://caniuse.com/#feat=css-transitions

⚠️：每一帧的动画都会导致重绘，如果元素下方有大量的元素存在，那么在高度效果过渡的时候就可能会产生延迟。

返回总目录

每天 30 秒系列之 CSS