React에서 애니메이션을 사용하여 접기(Collapse)를 구현했습니다.



조금 빠졌기 때문에 기록을 남겨 둡니다.

구현 코드

App.tsx

import { useState } from 'react'

import './App.css'

const App = () => {
  const [open, setOpen] = useState(false)

  const onClick = () => setOpen((prev) => !prev)

  return (
    <>
      <button onClick={onClick}>{open ? 'close' : 'open'}</button>
      <div className={`collapse ${open ? 'visible' : 'hidden'}`}>example</div>
    </>
  )
}

export default App

App.css

.collapse {
  transition: height 300ms;
  overflow: hidden;
  color: white;
  background-color: #333;
}

.visible {
  height: 30px;
}

.hidden {
  height: 0;
}

CSS 포인트

접기 (Collapse)를 열고 닫을 때 height를 전환합니다.

transition: height {X}ms; 지정

overflow: hidden; 지정

빠진 부분

overflow: hidden;

overflow: hidden;를 지정하지 않으면 자식 요소 (예 : "example"이라는 텍스트)가 애니메이션에 관계없이 표시됩니다.

stack overflow 기사 을 보고 overflow: hidden; 를 지정하는 것을 깨달았습니다.

display: none;

원래는 Bootstrap의 Collapse을 흉내내려고 했는데 원래 소스 코드를 바라보고 있으면 숨길 때는 display: none;가 설정되었습니다
이 부분만 읽고 있던 자신이 조합점했을 가능성도 있습니다만, display: none; 그렇다면 DOM 가 마운트되어 있지 않기 때문에 transition 가 기능하지 않았습니다.