← 返回导航

折叠展开

transitions
什么是 CSS 过渡？
CSS 过渡让属性值变化时平滑过渡，而非瞬间跳变，需指定属性、时长、缓动函数。
为什么用 max-height？
height: auto 无法过渡，用 max-height 从 0 过渡到一个足够大的值即可实现展开效果。
手风琴如何实现？
点击时展开当前项，同时收起其他项，JS 切换 open 类即可，CSS 负责过渡动画。

关键点

  • 折叠展开通过 max-height 从 0 到一个足够大的值过渡实现，因为 height: auto 无法直接过渡
  • 设置一个比实际内容大的 max-height 值，配合 overflow: hidden 裁剪超出部分
  • 展开时 max-height 设大值，收起时设为 0，内容自然随高度裁剪显隐
  • 缺点是 max-height 过大时收起动画会有延迟感，需根据内容高度合理设置
  • 可配合 padding 同步过渡，让收起时内边距也平滑消失，更自然

效果说明

手风琴折叠展开。height: auto 无法直接过渡，常用 max-height 从 0 过渡到一个足够大的值来模拟展开。点击标题切换 .open 类，max-height 与图标旋转同步过渡。这是 FAQ、菜单、设置面板最经典的折叠方案。

CSS
JavaScript