如何为Slide组件配置基于指定容器的挂载/卸载滑入滑出动画？

实现方案 #

你的现有代码存在两个核心问题：

• 直接用条件判断渲染Slide组件，会导致状态切换时组件直接卸载，无法触发滑出动画
• Slide的in属性写死为true，无法响应状态变更控制动画的进入退出

如果你使用的是Material UI的Slide组件

修改后的代码如下：

import { useRef, useState } from 'react';
import Slide from '@mui/material/Slide';

function Main(){  
  const [showProfileMenu, setShowProfileMenu] = useState(false);
  // 给容器绑定ref，传给Slide作为挂载容器
  const slideContainerRef = useRef(null);

  return(
    <div className="main">
      <Header />
      <div className="profile-slide-container" ref={slideContainerRef}>
        {/* 把状态传给in属性，不直接条件渲染Slide，direction设为right即可实现右滑入、左滑出 */}
        <Slide 
          in={showProfileMenu} 
          direction="right" 
          container={slideContainerRef.current}
          unmountOnExit
        >
          <div className="pseudo-left-section">
            <ProfileMenu onClick={() => setShowProfileMenu(false)} />
          </div>
        </Slide>
      </div>
      <div className="left-section">
            <div>
              <LeftSectionHeader onClick={() => setShowProfileMenu(true)} />
              <LangMenu />
            </div>
        </div>
      </div>
  );
}

添加对应的CSS样式：

.profile-slide-container {
  position: relative;
  overflow: hidden;
  /* 按需设置容器宽高，适配你的布局 */
  width: 300px;
  height: 100vh;
}

.pseudo-left-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

如果你是自定义Slide组件

可以基于react-transition-group的CSSTransition实现，核心逻辑如下：

• 进入初始状态设置transform: translateX(-100%)，进入结束状态设置transform: translateX(0)
• 退出结束状态设置transform: translateX(-100%)，统一配置过渡动画时长即可
• 同样需要将容器ref传入CSSTransition的nodeRef属性保证动画绑定正确

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