목록CSS (1)

프론트엔드 첫걸음

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

See the Pen React Accordion 2 by JEONG (@cona) on CodePen. 제목을 저렇게 지은 이유는 transition 으로 펼쳐지는 아코디언을 구현할때 가장 어려웠던 부분이 바로 scrollHeight였기 때문이다. 펼쳐지는 부분 (보통 질문에 대한 답이 있는 부분) 의 높이가 각각 다른데 transition 하는 요소에서 펼쳐졌을때의 height를 100%로 하면 transition이 적용되지 않는다. scrollHeight로 펼쳐졌을때의 px 을 대입해주어야 한다.
개발 공부/CSS 2023. 11. 2. 12:18
이전 Prev 1 Next 다음