Блог

Я хотел использовать точки останова в компоненте из MUI v4, чтобы элементы моей Грид-системы появлялись и исчезали.

Как я могу сделать плавный переход CSS для перехода b с 0 пикселей на определенный размер точки останова 3 для xl ? это работает для меня, когда я использую%, но я не могу понять, как добиться того же с помощью сетки. Он не будет иметь ширину 0 пикселей

напр.:

  let show = true; //reactUseState  const toggle = (p) =gt; {  return(!p); }  lt;Grid container direction="rowgt;  lt;Grid id="a" item xl={show?12:9}gt;{children}lt;/Gridgt;  lt;Grid id="b" item xl={show?false:3}gt;{otherchildren}lt;/Gridgt; lt;/Gridgt;  lt;Button onClick={() =gt; toggle(show)}gt;Show 1 or 2 itemslt;/Gridgt;  

Надеюсь, кто-нибудь знает этот трюк!

Это должно сработать:

 lt;Grid container direction="row"gt;  lt;Grid className="right" id="b" item lg={show ? 12 : 9}gt;{'otherchildren'}lt;/Gridgt;  lt;Grid className={show? "left left-hide" : "left"} id="a" item lg={3}gt;{'children'}lt;/Gridgt; lt;/Gridgt;  

CSS

  .right {  transition: ease 0.5s; }  .left {  transition: ease 0.5s;  overflow: hidden; }  .left-hide {  flex-basis: 0% !important; }