justify-content: space-around 중에 display:none 애니메이션 적용

display:flex를 여기저기 바르던 시절....

메인 메뉴를 만들고 있었다.

왼쪽의 아이콘 + 글자가 한덩어리, 오른쪽의 아이콘이 한덩어리

메뉴가 닫힌 상태에서는 collapse 버튼이 안나오고 열린 상태에서만 나오도록 처리했다.

리액트를 사용중이므로 실제로 아이콘 버튼이 렌더 안되도록 처리해뒀는데

space-around 상태에서 아이템이 사라졌다 없어졌다 하니까 상태에 따라서 살짝 꿈틀 하는 문제가 있었다.

{collapse? null : <Icon/>}

 

display:none 처리하고 transition과 transition-timing-function의 step-end를 사용해서 해결하려고 했는데

.container{
    display: flex;
    justify-content: space-around;

    .expandButton {
      transition: 0.5s;
      transition-timing-function: step-end;
      &.collapse {
        display:none;
      }
    }
}

display 속성은 애니메이션 대상이 아니었다. transition이 안먹힌다.

justify-content를 flex-start에서 space-around로 바꿀려고도 했는데 justify-content는 대상이 아니었다.(링크)

아래는 animatiable 한 속성 목록

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

Animatable CSS properties - CSS: Cascading Style Sheets | MDN

 

애니메이션 하려면 visibility:hidden으로 처리하라고 하여 시도

visibility: hidden으로 처리하면 공간을 차지하고 있지만 보이지만 않는 상태

(사실 display:none 전에 visibility:hidden으로 먼저 했다. 공간을 차지하고 있어서 display:none으로 변경했었음)

이렇게 해도 계속 꿈틀거렸다...(flex 스트레스....)

.container{
    display: flex;
    justify-content: space-around;

    .expandButton {
      transition: 0.5s;
      transition-timing-function: step-end;
      &.collapse {
        visibility: hidden;
      }
    }
}

display:grid로 깔끔하게  바꿔버렸다. 아주 잘 동작한다.

고정된 형태인데 flex를 써서 괜히 고생했다.

grid를 써보다 보니 레이아웃 잡을때는 grid가 기본이 되고 특수한 경우에 flex를 쓰는게 맞다고 생각된다.

  .container {
    display: grid;
    grid-template-columns: 1fr 34px;

    .collapse {
      visibility: hidden;
    }
}