프론트엔드 첫걸음

scrollHeight사용해서 accordian의 transition 효과 구현하기 본문

개발 공부/CSS

scrollHeight사용해서 accordian의 transition 효과 구현하기

차정 2023. 11. 2. 12:18

See the Pen React Accordion 2 by JEONG (@cona) on CodePen.

제목을 저렇게 지은 이유는 transition 으로 펼쳐지는 아코디언을 구현할때 가장 어려웠던 부분이 바로
scrollHeight였기 때문이다.

펼쳐지는 부분 (보통 질문에 대한 답이 있는 부분) 의 높이가 각각 다른데
transition 하는 요소에서 펼쳐졌을때의 height를 100%로 하면 transition이 적용되지 않는다.
scrollHeight로 펼쳐졌을때의 px 을 대입해주어야 한다.

'개발 공부 > CSS' 카테고리의 다른 글

이미지를 parent 요소의 패딩 무시하고 화면을 가득 채우도록 만들기  (0) 2024.03.20
height 100%를 쓰는 이유  (0) 2023.11.02
svg 아이콘 색바꾸기 어떻게 하나요?  (0) 2023.09.25
길이가 각각 다른 list item 중앙 정렬  (0) 2023.09.21
clip-path transition  (0) 2023.08.29
'개발 공부/CSS' Related Articles more