React Transition Group菜单滑动过渡失效问题排查求助

我在React应用中使用react-transition-group的CSSTransition组件，想要实现菜单从左向右滑入的平滑过渡效果，但该功能完全无法正常工作，找不到问题根源，请求帮助排查修复。

React代码 #

import { useEffect, useRef } from 'react';
import Backdrop from '../Backdrop/Backdrop';
import Navigation from '../Navigation/Navigation';
import IconToggleOn from '../NavigationIcons/IconToggleOn';
import { ContentContainer } from './Menu.styled';
import { removeBodyscroll } from '../../../utils/removeBodyScroll';
import { CSSTransition } from 'react-transition-group';

const Menu = ({ menuOpen, setMenuOpen }) => {
  useEffect(() => {
    removeBodyscroll(menuOpen);
  }, [menuOpen]);

  const nodeRef = useRef(null);

  useEffect(() => {
    const handleKeyDown = e => {
      if (e.code === 'Escape') {
        setMenuOpen(false);
      }
    };
    document.addEventListener('keydown', handleKeyDown);
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, [setMenuOpen]);

  const handleBackdropClick = e => {
    if (e.currentTarget === e.target) {
      setMenuOpen(false);
    }
  };

  const handleLinkClick = () => {
    setMenuOpen(false);
  };

  return (
    <Backdrop handleBackdropClick={handleBackdropClick}>
      <CSSTransition
        nodeRef={nodeRef}
        in={menuOpen}
        timeout={300}
        classNames="menu"
        unmountOnExit
      >
        <ContentContainer className="menus" menuOpen={menuOpen} ref={nodeRef}>
          <Navigation status="menu" handleLinkClick={handleLinkClick} />
          <IconToggleOn />
        </ContentContainer>
      </CSSTransition>
    </Backdrop>
  );
};

export default Menu;

CSS代码 #

.menu-enter {
  transform: translateX(-100%);
}

.menu-enter-active {
  transform: translateX(0);
  transition: transform 300ms ease-out;
}
.menu-exit {
  transform: translateX(0);
}

.menu-exit-active {
  transform: translateX(-100%);
  transition: transform 300ms ease-out;
}

问题排查与修复方案 #

1. 解决样式优先级冲突 #

你使用的ContentContainer是styled组件，它的内置样式可能覆盖了过渡类的样式。通过提高过渡类选择器权重解决：

/* 增加.menus前缀，提升选择器优先级 */
.menus.menu-enter {
  transform: translateX(-100%);
}

.menus.menu-enter-active {
  transform: translateX(0);
  transition: transform 300ms ease-out;
}

.menus.menu-exit {
  transform: translateX(0);
}

.menus.menu-exit-active {
  transform: translateX(-100%);
  transition: transform 300ms ease-out;
}

2. 调整styled组件基础样式 #

确保ContentContainer的基础样式不阻挡过渡，给菜单设置正确的固定定位：

// Menu.styled.js中的ContentContainer定义
export const ContentContainer = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100vh;
  background-color: #fff; /* 根据设计调整颜色 */
  z-index: 100;
  /* 不要在这里设置transform，交给过渡类控制 */
`;

3. 验证unmountOnExit的影响 #

unmountOnExit会在过渡结束后卸载组件，可能导致退出过渡无法完整触发。可以先临时移除该属性测试，若过渡正常，再考虑保留并确保退出动画时长与timeout参数匹配。

4. 检查Backdrop组件样式 #

确保Backdrop不会遮挡菜单过渡，设置合理的层级：

/* Backdrop样式示例 */
.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 99; /* 低于菜单的z-index */
}

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