如何用CSS实现菜单平滑展开？React中过渡动画不生效问题排查

你使用了条件渲染逻辑{activeMenu && <nav />}，当activeMenu为false时，菜单元素会直接从DOM树中被移除；当activeMenu切换为true时，菜单才会重新挂载到DOM中，且挂载时就已经带上了active类。
CSS过渡动画的触发前提是同一个DOM元素的属性/类名发生前后变化，你的逻辑中元素每次显示都是全新生成的，没有从非激活类到激活类的切换过程，因此过渡不会生效。

1. 移除菜单的条件渲染判断 #

保留菜单元素始终在DOM中，仅通过类名切换控制状态，修改后的React代码如下：

import React, {useState} from "react";
export let Menu_Button = () => {
  let [activeMenu, SetActiveMenu] = useState(false);

  return (
    <div>
      <div className='button_mobile' onClick={() => SetActiveMenu(!activeMenu)}>
        <span></span>
      </div>
      {/* 删掉外层的activeMenu条件判断，始终渲染nav元素 */}
      <nav className={activeMenu ? 'menu active' : 'menu'}>
        <div><a href='#'>BBBBBBBBBB</a></div>
        <div><a href='#'>BBBBBBBBBB</a></div>
        <div><a href='#'>BBBBBBBBBB</a></div>
        <div><a href='#'>BBBBBBBBBB</a></div>
        <div><a href='#'>BBBBBBBBBB</a></div>
      </nav>
    </div>
  )
}

2. 可选CSS优化 #

如果要避免菜单隐藏时还能被点击触发交互，可以补充visibility和opacity属性让过渡更自然：

.menu{
  position: absolute;
  top: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 115px;
  background-color: orange;
  transform: translateX(-100%);
  transition: all 0.3s;
  visibility: hidden;
  opacity: 0;
}

.menu.active{
  transform: translateX(0);
  visibility: visible;
  opacity: 1;
}

如果修改后偏移位置不符合预期，检查菜单的父级元素是否设置了position: relative，确保transform的偏移基准是你预期的父容器。

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