How can I animate a hidden card to appear

Question

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>

You can look at CodePen examples.. just google `"codepen + cards + transition"` or something similar — vsync, Jul 12 '22 at 11:05

Girish Sawant · Answer 1 · 2022-07-13T08:54:28.957

0

Try adding this css,


qCard: {
    backgroundColor: "#D9F5FD",
    border: "1px solid #E1E1E1",
    width: 0,
    height: 0,
    marginRight: "1vw"
},
animate: {
    animation: "$myEffect 500ms ease-in-out forwards"
},
"@keyframes myEffect": {
    "0%": {
      width: 0,
      height: 0,
    },
    "100%": {
      width: "5vw",
      height: "auto"
    }
}

Dynamically add the animate style based on hidden value.

edited Jul 13 '22 at 08:54

answered Jul 12 '22 at 11:05

Girish Sawant

18
6

OP needs `transition` not `animation`... and you cannot assume anything until we see his whole code – vsync Jul 12 '22 at 11:06
Unfortunately this does not work as I am not using a `.css` file. I have updated the question to show what my styling looks like – Ciaran Crowley Jul 12 '22 at 12:32
You can define this animation in makeStyle [reference](https://stackoverflow.com/questions/58948890/how-to-apply-custom-animation-effect-keyframes-in-mui) – Girish Sawant Jul 13 '22 at 08:49

score 0 · Answer 2 · answered Jul 12 '22 at 11:30

0

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

answered Jul 12 '22 at 11:30

Sachin Vishwakarma

854
7
9

How can I animate a hidden card to appear

2 Answers2