React 아코디언 효과 구현하기

Question

다음과 같이 transition 속성을 적용하여

컴포넌트를 클릭했을때, 컴포넌트가 아코디언 처럼 서서히 펼쳐지고, 접히는 효과를 구현하고 싶습니다.isOpen이 true가 되어 펼쳐지는 효과는 정상적으로 구현되는데, 접히는 효과가 안나타나고 한번에 사라집니다.transition 속성을 어떻게 적용하면 될까요?const Container = styled.div` margin-left: 20px; `; const Header = styled.div` width: 250px; height: 30px; margin-top : 20px; margin-bottom: 20px; border-radius: 4px; cursor: pointer; `; const ContentsWrapper = styled.div<{ isOpen: boolean }>` width: inherit; padding: 0 15px 0 15px; overflow: hidden; height: ${({ isOpen }) => (isOpen ? "auto" : "0")}; margin-top: ${({ isOpen }) => (isOpen ? "20px" : "0")}; max-height: ${({ isOpen }) => (isOpen ? "1000px" : "0")}; transition: height 1s ease, max-height 1s ease, margin-top 1s ease; `; const Contents = styled.div` padding: 0 15px 0 15px; `; const TestReportOpinion = ({ reportAnswerList, positionIndex, question, kind, }: { reportAnswerList: reportAnswerList; positionIndex: number; question: string; kind: number; }) => { const [isOpen, setIsOpen] = useState(true); const handleButtonClick = () => { setIsOpen((prev) => !prev); }; return(

{t(question)}

<> {t("등급")} {t("의견")} {t("평가")} ... )

Nashiba · Answer

css 속성 중에 에니메이션 하나 주고클릭 이벤트로 토글 하도록 해서해당 class를 줬다 뺏다 하면 됩니다.물론 토글에 딜레이를 주기위해디바운스 시간을 에니메이션 듀레이션에맞춰야합니다

컴포지트 · Answer

ContentsWrapper 스타일 저렇게 정의하면 속성 아무리 바꿔도 스타일 안 바뀝니다.동적 스타일을 원할 경우, 함수형태로 만드시길https://emotion.sh/docs/styled#composing-dynamic-styles

React 아코디언 효과 구현하기

2개의 답변

Q&A 목록