Sym - 一个用 Java 实现的现代化社区平台 • 源码 • 注册

Pipe - 小而美的开源博客平台 • 体验 • 皮肤
Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载 
Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

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

2019-08-09

描述

在一个元素高度不确定的情况下,为其做一个高度从 0auto 的过渡效果。

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%
支持情况:

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

返回总目录

每天 30 秒系列之 CSS


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

推荐阅读
留下你的脚步