CSS Transition实现点击滑入滑出菜单无动画，求助解决方法

嘿，我懂你作为Transition新手想实现那种点击平滑展开、再点击收起的菜单的心情，之前踩了display属性不支持过渡的坑对吧？别担心，这就给你捋清楚怎么解决！

核心问题：为什么display没法做过渡？ #

display属性的切换是即时生效的，浏览器不会给transition留过渡的时间，所以咱们得换用那些支持过渡的属性来模拟显示隐藏，同时还要保证隐藏时不占空间。

方案一：CSS + JavaScript 结合（推荐，更灵活） #

咱们不用直接改display，而是通过切换类名来控制菜单的可见性、透明度和高度，实现平滑过渡：

HTML代码（和你原来的一样）

<div class="sort">
  <div class="sort-options">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</div>

CSS代码（调整过渡属性）

.sort-options {
  margin: 20px;
  /* 一直保持flex布局，不用display:none */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 20px;
  width: 100%;
  
  /* 初始隐藏状态：不可见、透明、高度为0 */
  visibility: hidden;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  
  /* 给所有可过渡属性加动画 */
  transition: all 0.3s ease-in-out;
}

/* 激活状态：可见、不透明、高度足够容纳内容 */
.sort-options.active {
  visibility: visible;
  opacity: 1;
  max-height: 200px; /* 设一个比菜单实际高度大的值就行 */
}

JavaScript代码（切换类名替代直接改display）

const sortDiv = document.querySelector('.sort')
sortDiv.addEventListener('click', function() {
  const sortOptions = document.querySelector('.sort-options');
  // 用toggle方法一键切换active类
  sortOptions.classList.toggle('active');
});

方案二：纯CSS实现（无需JS） #

如果不想写JS，可以用Checkbox Hack来模拟点击事件，原理是用label关联隐藏的checkbox，通过checkbox的选中状态来控制菜单：

HTML代码（增加checkbox和label）

<div class="sort">
  <!-- 隐藏的checkbox，用来记录状态 -->
  <input type="checkbox" id="sort-toggle" hidden>
  <!-- 点击这个label就相当于点击checkbox -->
  <label for="sort-toggle">点击切换菜单</label>
  <div class="sort-options">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</div>

CSS代码（通过checkbox伪类控制菜单）

/* 当checkbox被选中时，显示菜单 */
#sort-toggle:checked ~ .sort-options {
  visibility: visible;
  opacity: 1;
  max-height: 200px;
}

.sort-options {
  margin: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 20px;
  width: 100%;
  
  visibility: hidden;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

关键细节说明 #

• 用max-height而不是height：因为height:auto无法直接过渡，max-height可以模拟展开/收起的效果，只要设置的值大于菜单实际高度，就不会影响显示。
• overflow:hidden：保证菜单隐藏时，超出max-height的内容被裁剪，不会占用额外空间。
• visibility:hidden和opacity:0配合：既让元素不可见，又能实现透明度的平滑过渡。

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