javascript – Make a MUI v4 Grid element appear with CSS transition?


I wanted to make use of the breakpoints in the component from MUI v4 to let items of my Grid-System appear and disappear.

How can I make a smooth CSS transition for b from 0px to to definied breakpoint size 3 for xl? it works for me when I use %, but I can’t figure out how to achieve the same with a Grid. It wont have width 0px

eg:


let show = true; //reactUseState

const toggle = (p) => {
  return(!p);
}

<Grid container direction="row>
  <Grid id="a" item xl={show?12:9}>{children}</Grid>
  <Grid id="b" item xl={show?false:3}>{otherchildren}</Grid>
</Grid>

<Button onClick={() => toggle(show)}>Show 1 or 2 items</Grid>

I hope someone knows the trick!



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here