Reactjs 材质UI连续动画

我有两个div

第一个

div

通过

Material UI

Slide

动画可见，然后在第一个

div

消失后，第二个

div

通过

Grow

动画可见。（我正在使用setInterval）

我使用

挂钩设置活动的
div
。不幸的是，在将第一个
div设置为非活动状态后，第二个
div
立即可见，我无法显示第一个
div
的
exit
动画

我发现了这个问题，但无法实现，它太复杂了

export default function BasicTable() {
    const classes = useStyles();

    const [firstScreenActive, setFirstScreenActive] = React.useState(true);
    
    //I don't use this hook right now.
    const [secondScreenActive, setSecondScreenActive] = React.useState(false);

    const [seconds, setSeconds] = useState(1);

    useEffect(() => {
        const timer = setInterval(() => {
            setSeconds(seconds + 1);
            setFirstScreenActive((prev) => !prev);
        }, 4000);
        return () => clearInterval(timer);
    });

    return (
        <div className={styles.main}>

            {!firstScreenActive ?

                <div className={styles.cardPerson}>
                    <Grow
                        in={!firstScreenActive}
                        style={{ transformOrigin: '0 0 0' }}
                        {...(!firstScreenActive ? { timeout: 1000 } : {})}
                    >
                        <div className={styles.cardPersonItem}>
                        </div>
                    </Grow>
                </div>

                :

                <div className={styles.cardPerson}>
                    <Slide direction='right' in={firstScreenActive} mountOnEnter unmountOnExit timeout={{ enter: 980, exit: 400 }}>
                        <TableContainer className={classes.body} component={Paper}>
                        </TableContainer>
                    </Slide>
                </div>
            }
        </div >
    );
}

导出默认函数BasicTable（）{
const classes=useStyles（）；
常量[firstScreenActive，setFirstScreenActive]=React.useState（true）；
//我现在不用这个钩子。
const[secondScreenActive，setSecondScreenActive]=React.useState（false）；
常数[秒，设置秒]=使用状态（1）；
useffect（（）=>{
常量计时器=设置间隔（（）=>{
设置秒（秒+1）；
setFirstScreenActive（（prev）=>！prev）；
}, 4000);
返回（）=>clearInterval（计时器）；
});
返回(
{！第一屏幕激活？
:
}
);
}

如何显示退出动画？（对于两个
div
）

编辑：

沙箱与我的整个观点
 从
return
中删除
firstScreenActive？
，并在
Grow

这是你的电话号码

当您删除
firstScreenActive
检查时，将显示动画

更新
我非常感谢您的努力，谢谢您抽出时间。在您的解决方案中，
Slide
div
会跳出屏幕。也许这是因为我的观点比我发布的更复杂。我用叉子叉了你的“沙盒”，粘贴了我的整个视图。你能看看吗？链接在帖子中。当然，让我检查一下。我已经更新了代码。我还更新了一些样式。在第二个视图离开之前，请检查第一个视图是否显示在屏幕底部。我将
Grow
更改为
Slide
，也更改了
enter
和
exit
次，但没有机会。