如何基于CSS transform实现60fps流畅的下拉菜单高度动画？

原height动画的卡顿根源 #

你遇到的掉帧问题本质是因为height属于触发页面重排的Layout类属性：每帧动画过程中浏览器都需要重新计算整个DOM树的几何尺寸、更新所有关联元素的位置，CPU开销极高；打开DevTools时，浏览器会注入更多渲染监控的钩子，重排操作的耗时会被成倍放大，进一步加剧卡顿。
而transform属于合成层属性，动画过程不会触发重排、重绘，浏览器会直接把动画逻辑交给GPU处理，全程不占用主线程的布局计算资源，能稳定达到60fps的流畅度。

核心实现思路 #

完全不需要修改外层容器的固定高度，通过「外层容器做固定尺寸裁切 + 内部下拉内容层脱离文档流、做transform缩放动画」的组合，实现和原height动画完全一致的视觉效果，全程无重排：

• 外层裁切容器保持固定高度，永远不做尺寸动画，通过overflow: hidden把超出容器范围的内容裁掉
• 内部下拉内容层用绝对定位脱离文档流，不占用文档流空间，不会影响其他元素的布局位置
• 给下拉内容层设置顶部对齐的缩放原点，收起状态下设为scaleY(0)，展开状态下设为scaleY(1)，过渡效果直接绑定在transform属性上

具体代码改造（完全兼容原有页面结构） #

改造后的CSS #

#wrapper {
  position: relative;
  height: 20px; /* 容器高度固定为标题高度，全程不修改 */
  overflow: hidden; /* 裁切超出可视范围的内容 */
}

/* 下拉内容层 */
.dropdown-content {
  position: absolute;
  top: 20px; /* 刚好对齐标题下方的位置 */
  left: 0;
  width: 100%;
  transform-origin: top center; /* 缩放原点固定在顶部，避免动画从中间展开的违和感 */
  transform: scaleY(0); /* 默认收起，视觉上完全不可见 */
  transition: transform 0.2s ease; /* 过渡效果只绑定transform属性 */
}

/* 展开状态 */
#wrapper.open .dropdown-content {
  transform: scaleY(1);
}

.item {
  height: 20px;
}

改造后的HTML #

只需要给原来的下拉内容外层加一个类名，结构几乎和原有实现完全一致：

<div id="wrapper">
  <div id="title">Title</div>
  <div class="dropdown-content">
    <div class="item">Dropdown Label 1</div>
    <div class="item">Dropdown Label 2</div>
  </div>
</div>
<div>Other stuff</div>

改造后的JS #

不需要手动计算、修改元素的height值，只需要切换类名即可：

document.querySelector("#title").addEventListener("click", () => {
  document.querySelector("#wrapper").classList.toggle("open");
});

方案的实际优势 #

• 全程无重排开销，哪怕DevTools处于打开状态，也不会出现卡顿掉帧的问题，所有动画逻辑由GPU处理，可稳定实现60fps的流畅效果
• 不需要手动计算下拉内容的实际高度，哪怕下拉内容是动态加载、高度不固定的场景，也能正常运行，比原来的height动画方案灵活很多
• 视觉反馈和原height动画没有可感知的差异：从顶部向下逐渐展开的动画方向、裁切效果和手动修改height的表现完全一致

内容的提问来源于stack exchange，提问作者sanjihan