CSS高度不定展开收起优化方案

---

 

在 CSS 中实现高度不定的展开收起动画时，可以通过以下方案避免卡顿：

最佳方案：CSS Grid 的 grid-template-rows 过渡

利用 CSS Grid 布局的特性，通过 fr 单位实现平滑过渡，避免直接操作 height 属性。

<div class="container">
  <div class="content">不定高度的内容...</div>
</div>
<button onclick="toggle()">切换</button>

<style>
.container {
  display: grid;
  grid-template-rows: 0fr; /* 初始收起状态 */
  transition: grid-template-rows 0.3s ease-out;
  overflow: hidden; /* 隐藏溢出内容 */
}

.container > .content {
  min-height: 0; /* 关键！允许内容收缩 */
}

.container.expanded {
  grid-template-rows: 1fr; /* 展开状态 */
}
</style>

<script>
function toggle() {
  document.querySelector('.container').classList.toggle('expanded');
}
</script>