React中MUI Slide组件监听器触发异常：启动时触发而非结束时

问题描述 #

我想要实现一个元素从屏幕右侧滑动至左侧的效果，使用了MUI的Slide组件，但添加的addEndListener监听器在过渡启动时就触发了，而非过渡结束时。代码如下：

import rock1 from "src/demos/MyDemo/assets/rock1.png"
import Slide from '@mui/material/Slide';

const Test = () => {

    return (
        <>
            <Slide 
                direction="left" 
                in={true} 
                mountOnEnter unmountOnExit
                timeout={4000}
                easing={{
                    enter: "linear",
                    exit: "linear"
                }}
                addEndListener={()=>alert("Done")}
            >
                <img 
                    height={100}
                    className="Rock" src={rock1}
                    style={{position:"absolute", left: -100, marginBottom:20}}
                />
            </Slide>
        </>
    );
}

export default Test;

原因分析 #

1. addEndListener用法错误：MUI的Slide组件中，addEndListener的参数是(node, done)，它要求你手动为元素绑定过渡结束事件，并在事件触发时调用done函数来通知组件过渡完成。直接传一个回调函数会被组件立刻执行，导致触发时机提前。
2. 初始位置与过渡方向不匹配：direction="left"表示元素从右侧滑入到目标位置，但你设置了left: -100把元素初始放在左侧，这会打乱组件的过渡逻辑，进一步加剧触发时机异常。

解决方法 #

1. 修正addEndListener的写法 #

正确绑定transitionend事件，并在事件触发时执行自定义逻辑+调用done：

addEndListener={(node, done) => {
  const handleTransitionEnd = () => {
    alert("Done"); // 这里放你的过渡结束逻辑
    done(); // 通知组件过渡完成
  };
  // 添加一次性监听，避免重复触发
  node.addEventListener('transitionend', handleTransitionEnd, { once: true });
}}

2. 调整元素初始位置 #

配合direction="left"的逻辑，把元素初始放在屏幕右侧，让组件控制从右到左的滑动：

<img 
  height={100}
  className="Rock" src={rock1}
  style={{position:"absolute", right: -100, marginBottom:20}}
/>

完整修正后的代码 #

import rock1 from "src/demos/MyDemo/assets/rock1.png"
import Slide from '@mui/material/Slide';

const Test = () => {

    return (
        <>
            <Slide 
                direction="left" 
                in={true} 
                mountOnEnter unmountOnExit
                timeout={4000}
                easing={{
                    enter: "linear",
                    exit: "linear"
                }}
                addEndListener={(node, done) => {
                  const handleEnd = () => {
                    alert("Done");
                    done();
                  };
                  node.addEventListener('transitionend', handleEnd, { once: true });
                }}
            >
                <img 
                    height={100}
                    className="Rock" src={rock1}
                    style={{position:"absolute", right: -100, marginBottom:20}}
                />
            </Slide>
        </>
    );
}

export default Test;

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