CSS过渡实现可变高度面板显示/隐藏失效问题求助

嘿，我来帮你搞定面板切换时容器高度平滑过渡的问题！

首先得明确：直接切换display: none/block是没法触发CSS过渡的，因为这是离散状态的变化。我们可以用max-height结合overflow: hidden来模拟平滑的高度变化，具体步骤如下：

1. 补全基础HTML结构 #

先把你提到的结构补全成可测试的样子：

<div class="panel-container">
  <div id="get-started" class="panel">
    <!-- 第一个面板内容，高度示例：200px -->
    这是「开始使用」面板，包含一些引导文字和按钮
  </div>
  <div id="another-panel" class="panel hidden">
    <!-- 第二个面板内容，高度示例：450px -->
    这是另一个面板，内容更多，包含详细的功能说明和表单
  </div>
</div>
<button>切换面板</button>

2. 核心CSS样式 #

关键是给容器设置过渡属性，通过切换面板的max-height值来实现平滑伸缩：

.panel-container {
  overflow: hidden;
  /* 设置一个比所有面板最大高度还大的值，比如500px，留足余量 */
  max-height: 500px;
  /* 过渡时间可根据需求调整，0.5s是比较自然的速度 */
  transition: max-height 0.5s ease;
}

.panel {
  width: 100%;
  padding: 1rem;
  box-sizing: border-box;
}

/* 隐藏状态的面板样式 */
.panel.hidden {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  /* 延迟visibility的变化，确保透明度和高度过渡完成后再隐藏 */
  transition: visibility 0s 0.5s, opacity 0.5s ease, max-height 0.5s ease;
}

/* 显示状态的面板样式 */
.panel:not(.hidden) {
  max-height: 500px;
  visibility: visible;
  opacity: 1;
  /* 显示时立即触发可见性，同时过渡透明度和高度 */
  transition: visibility 0s, opacity 0.5s ease, max-height 0.5s ease;
}

3. 简化你的JS代码 #

只需要切换两个面板的hidden类即可，不用操作display属性：

$("button").click(function(){
  $("#get-started").toggleClass("hidden");
  $("#another-panel").toggleClass("hidden");
});

方案原理说明 #

• CSS只能对数值型属性执行过渡动画，max-height是数值属性，所以可以实现平滑的伸缩效果
• 配合visibility和opacity的过渡延迟，能避免面板切换时出现内容突然闪现/消失的突兀感
• 容器的overflow: hidden会自动裁剪超出max-height的部分，完美模拟面板的显示与隐藏

小技巧 #

• 如果不确定所有面板的最大高度，可以把max-height设为一个足够大的值（比如1000px），不会影响过渡效果
• 过渡时间可以按需调整：0.3s更轻快，0.6s更柔和，根据你的产品风格来定

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