상황 설명 및 해결 방법

https://cdpn.io/pen/debug/xmjRNo

CSS의 transition 속성은 요소의 상태 변화에 따른 시각적인 변화를 점진적으로 보여주기 위해 사용한다. 그러나 display 속성이 none에서 block 으로 변경될 때는 transition 속성을 사용해서 이 변화를 표현할 수 없다.

display: none 속성은 렌더 트리에서 요소를 완전히 제거하여 화면에서 사라지게 만들고, 이로 인해 어떠한 CSS 속성도 적용되지 않는다. 렌더 트리에서 사라지면 요소의 상태 변화를 추적할 수 없기 때문에 transition 변화가 시작되는 지점 역시 찾을 수 없다.

이 문제는 2가지 방법으로 해결할 수 있다.

1. animation + display 사용 : animation 속성은 요소의 상태 변화와 상관없이 애니메이션 실행
2. transition + visibility 사용 : visibility 속성은 렌더 트리/공간은 유지한 채 화면에서만 숨김
   • 접기 : visibility: hidden; max-height: 0;
   • 펼치기 : visibility: visible; max-height: 150px; (브라우저 높이를 줄이면 글자가 줄바꿈 돼서 요소가 높이를 더 차지하게 되므로 height 대신 max-height 속성을 사용한다)

function Accordion() {
  const [showDetail, setShowDetail] = useState(false);
  // ...
  return (
    <div
      className={classnames("transition-all ease-linear duration-200", {
        "invisible max-h-0 opacity-0 -mb-[13px]": !showDetail,
        "max-h-[150px]": showDetail,
      })}
    >
      <NoticeEntries />
    </div>
  );
}

요소 숨김 방식 차이점

1. display: none
   • 렌더 트리 : 제외 (렌더 트리에서 완전히 제거)
   • 리플로우 : 발생 (렌더 트리에서 제외됐으므로 레이아웃 재계산)
   • 리페인트 : 발생 (가시성 변화가 생겼으므로)
   • 이벤트 핸들러 : 비활성
   • DOM 트리 : 유지 (자바스크립트로 조작 가능)
2. visibility: hidden
   • 렌더 트리 : 유지 (화면엔 안보이지만 공간은 차지)
   • 리플로우 : 발생 안함 (레이아웃에 영향을 미치지 않으므로)
   • 리페인트 : 발생 (가시성 변화가 생겼으므로)
   • 이벤트 핸들러 : 비활성
   • DOM 트리 : 유지 (자바스크립트로 조작 가능)
3. opacity: 0
   • 렌더 트리 : 유지 (화면엔 안보이지만 공간은 차지)
   • 리플로우 : 발생 안함 (투명도 변경은 레이아웃에 영향 안줌)
   • 리페인트 : 발생 (투명도가 변경됐으므로)
   • 이벤트 핸들러 : 활성
   • DOM 트리 : 유지 (자바스크립트로 조작 가능)