How can I animate a hidden card to appear-CodePudding

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 **
summaryBox: {
    display: "flex",
},
qCard: {
    backgroundColor: "#D9F5FD",
    border: "1px solid #E1E1E1",
    width: "5vw",
    height: "auto",
    marginRight: "1vw",
},
...

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>

CodePudding user response：

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.

CodePudding user response：

I can suggest of use the easing prop on the collapse component. https://mui.com/material-ui/api/collapse/