Tengo un juego de tarjetas MUI. Una de estas cartas se oculta hasta que se expanden las otras cartas. Cuando las cartas se expanden, aparece la carta oculta. Quiero animar la tarjeta oculta para que no aparezca de repente.

 ** Styling ** const useStyles = makeStyles((theme) => ({ summaryBox: { display: "flex", }, qCard: { backgroundColor: "#D9F5FD", border: "1px solid #E1E1E1", width: "5vw", height: "auto", marginRight: "1vw", animation: "pop 500ms ease-in-out forwards", }, expand: { transform: "rotate(0deg)", marginLeft: "auto", transition: theme.transitions.create("transform", { duration: theme.transitions.duration.shortest, }), }, expandOpen: { transform: "rotate(180deg)", }, })); ... const [expanded, setExpanded] = useState(false); const [hidden, setHidden] = useState(true); const handleExpandClick = () => { setExpanded(!expanded); setHidden(!hidden); }; ... <Box className={classes.summaryBox} onClick={handleExpandClick} aria-expanded={expanded}> <Card className={classes.qCard} hidden={hidden}> <Collapse in={expanded} timeout="auto" unmountOnExit> </Collapse> </Card> </Box>