[HTML/CSS] 펼침/접힘 Transition 효과와 요소 숨김 방식 차이점

상황 설명 및 해결 방법

---

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 속성을 사용한다)

// transition + visibility 사용 예시 (Tailwind CSS)
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>
  );
}

 

요소 숨김 방식 차이점

---

	렌더 트리	리플로우	리페인트	이벤트 핸들러	DOM 트리
display: none	제외	발생	발생	비활성	유지
visibility: hidden	유지	발생 안함	발생	비활성	유지
opacity: 0	유지	발생 안함	발생	활성	유지

display: none

• 렌더 트리 : 제외 (렌더 트리에서 완전히 제거)
• 리플로우 : 발생 (렌더 트리에서 제외됐으므로 레이아웃 재계산)
• 리페인트 : 발생 (가시성 변화가 생겼으므로)
• 이벤트 핸들러 : 비활성
• DOM 트리 : 유지 (자바스크립트로 조작 가능)

 

visibility: hidden

• 렌더 트리 : 유지 (화면엔 안보이지만 공간은 차지)
• 리플로우 : 발생 안함 (레이아웃에 영향을 미치지 않으므로)
• 리페인트 : 발생 (가시성 변화가 생겼으므로)
• 이벤트 핸들러 : 비활성
• DOM 트리 : 유지 (자바스크립트로 조작 가능)

 

opacity: 0

• 렌더 트리 : 유지 (화면엔 안 보이지만 공간은 차지)
• 리플로우 : 발생 안함 (투명도 변경은 레이아웃에 영향 안 줌)
• 리페인트 : 발생 (투명도가 변경됐으므로)
• 이벤트 핸들러 : 활성
• DOM 트리 : 유지 (자바스크립트로 조작 가능)

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요