React Transition Group的CSSTransition菜单过渡动画失效求助

核心问题分析 #

1. CSS类名大小写不匹配：CSSTransition的className设置为Menu-open（大驼峰开头），但CSS中定义的动画类是小写的menu-open-xxx，导致样式无法被正确应用。
2. 定位冲突：DropdownMenu使用position: fixed，但动画类中设置了position: absolute，两种定位规则冲突，导致transform动画失效。
3. 组件定义位置不当：DropdownMenu在NavBar内部定义，每次NavBar渲染都会重新创建该组件，干扰CSSTransition的状态追踪。

修复后的代码 #

JSX 代码

import './App.css';
import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';

// 将DropdownMenu移到外部，避免重复创建
function DropdownMenu() {
  return (
    <div className="DropdownMenu"></div>  
  )
}

function App() {
  const [open, setOpen] = useState(false);

  const toggleOpen = () => {
    setOpen(!open);
  };

  return (
    <NavBar toggleOpen={toggleOpen} open={open} />
  )
}

function NavBar(props) {
  return (
    <div className="NavBar">
      <div className="Menu-button" onClick={props.toggleOpen}>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <CSSTransition
        in={props.open}
        timeout={500}
        className="menu-open" // 改为小写，与CSS类名统一
        unmountOnExit>
        <DropdownMenu/>
      </CSSTransition>
    </div>
  )  
}            

export default App;

CSS 代码

.NavBar {
  position: fixed;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  top: 0;
  width: 100%;
  height: 60px;
  background-color: gray;
  border-bottom: solid black 1px;
}

.Menu-button {
  background-color: transparent;
  padding-top: 0.5rem;
  cursor: pointer;
  margin: 20px;
  padding: 0;
}

.Menu-button div {
  width: 35px;
  height: 5px;
  background-color: #fff;
  margin: 6px 0;
  transition: 0.4s;
}

.DropdownMenu {
  position: fixed;
  top: 58px;
  right: 5px;
  width: 34%;
  height: 500px;
  border-radius: 5px;
  background-color: lightgray;
  /* 初始状态与动画起始值统一 */
  transform: translateX(-110%);
}

/* 修正类名匹配，移除冲突的absolute定位 */
.menu-open-enter {
  transform: translateX(-110%);
}
.menu-open-enter-active {
  transform: translateX(0%);
  transition: all 500ms ease;
}
.menu-open-exit {
  transform: translateX(0%);
}
.menu-open-exit-active {
  transform: translateX(-110%);
  transition: all 500ms ease;
}

额外说明 #

• 把DropdownMenu移到NavBar外部，确保组件实例稳定，让CSSTransition能正确追踪挂载/卸载状态。
• 统一DropdownMenu的初始transform值与动画起始值，避免定位规则冲突导致动画异常。
• 严格保持类名大小写一致，确保CSSTransition能正确触发对应动画样式。

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