在React中更改值时如何在Material ui滑块上添加平滑过渡

Question

我有一个要设置动画的滑块-单击某个值时，拇指应逐渐移动，而不是立即移动到所单击的位置。到目前为止，我已经设法完成了任务，但没有做到。

视频： https://s5.gifyu.com/images/ezgif.com-video-to-gif4a199bab388e4ace.gif

代码：

interface Props {
    children: React.ReactElement;
    open: boolean;
    value: number;
}
function ValueLabelComponent(props: Props) {
    const { children, open, value } = props;
    return (
        <Tooltip open={open} enterTouchDelay={0} placement='top' title={value}>
            {children}
        </Tooltip>
    );
}

export default function CustomizedSlider() {
    return (
        <Slider
            ValueLabelComponent={ValueLabelComponent}
            aria-label='custom thumb label'
            defaultValue={50}
        />
    );
}

.MuiSlider-thumb {
    transition: left 0.5s;
}

.MuiSlider-thumb.MuiSlider-active {
    transition: left 1s;
}

.MuiSlider-track {
    transition: width 0.5s;
}