如何为Checkbox控制的Div切换添加滑入滑出动画效果？

display: none无法触发CSS过渡效果，因为这个属性是瞬间生效的，元素会直接从DOM流中移除，没有中间过渡的过程。要实现旧区域滑下消失、新区域滑上显示的动画，得用可过渡的CSS属性来模拟隐藏/显示状态，比如max-height、opacity，配合overflow: hidden来实现平滑动画。

具体实现步骤 #

1. 调整CSS样式

用max-height控制元素的展开/收起，结合opacity实现淡入淡出，同时设置过渡动画：

.form-section {
  max-height: 1000px; /* 设置足够大的值覆盖表单内容高度 */
  opacity: 1;
  overflow: hidden;
  transition: all 300ms ease-in-out;
  margin: 8px 0; /* 可选：保持布局间距一致 */
  padding: 4px 0;
}

.form-section.hidden {
  max-height: 0;
  opacity: 0;
  margin: 0;
  padding: 0;
}

2. 优化HTML结构

移除内联的display: none，用CSS类控制初始隐藏状态：

<div>
  <label for="my-check">Click here</label>
  <input type="checkbox" name="my-check" id="my-check" onchange="change(event)">
</div>
<div>
  <div class="form-section hidden" id="part1">
    <input type="text" name="thing1" id="thing1"><label for="thing1">Thing 1</label><br>
    <input type="text" name="thing2" id="thing2"><label for="thing2">Thing 2</label>
  </div>
  <div class="form-section" id="part2">
    <select>
      <option>Else</option>
    </select>
  </div>
</div>
<hr>
<input type="text" name="other" id="other"><label for="other">Other</label>

3. 修改JS逻辑

通过切换hidden类来控制显示/隐藏，替代直接修改display属性：

function change(event) {
  const part1 = document.getElementById('part1');
  const part2 = document.getElementById('part2');
  
  if (event.target.checked) {
    part1.classList.remove('hidden');
    part2.classList.add('hidden');
  } else {
    part1.classList.add('hidden');
    part2.classList.remove('hidden');
  }
}

关键细节说明 #

• 使用max-height而非height：因为表单内容高度可能不固定，max-height可以自适应内容，只要设置的值足够大，过渡时就会平滑展开/收起。
• overflow: hidden：确保元素在max-height: 0时，内部内容不会溢出显示。
• opacity配合过渡：让动画同时包含滑入滑出和淡入淡出效果，视觉体验更自然。

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