I have a set of MUI cards. One of these cards is hidden until the other cards are expanded. When the cards expand, the hidden card then appears. I want to animate the hidden card so that it does not suddenly pop in.
** 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>
Try adding this css,
qCard: {
backgroundColor: "#D9F5FD",
border: "1px solid #E1E1E1",
width: 0,
height: 0,
marginRight: "1vw",
animation: "pop 500ms ease-in-out forwards"
},
@keyframes {
from {
width: 0;
height: 0;
}
to {
width: "5vw";
height: "auto";
}
}
Use this animation with styling framework you are using.
I can suggest of use the easing prop on the collapse component. https://mui.com/material-ui/api/collapse/