材质UI连续动画

Question

我有两个div。

第一个div通过Material-UISlide动画变为可见，然后在第一个div消失之后，第二个div通过Grow动画变为可用(我使用的是setInterval(

我用Hooks设置了活动的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 >
);
}

如何显示退出动画？(对于两个divs(

编辑：

SandBox可以看到我的全景。点击

Answer 1

从return中移除firstScreenActive ?，并在Grow上添加unmountOnExit和mountOnEnter道具

这是的演示

移除firstScreenActive检查时将显示动画

更新代码