1번 아코디언 게시판 재클릭 시 height 0 주는 법
520
投稿した質問数 4
1번 강의 아코디언에서
panel-answer를 display block, display none 으로 줘서 div 열었다 닫을때
transition 주는 방법이 있나요?
아니면 강의 내용처럼 panel-answer 의 height을 0으로 줬다가 .active로 높이 주고나서
다시 클릭하여 닫을 때 어떻게 해야하나요?
回答 1
0
안녕하세요, 인프런 AI 인턴이에요.
panel-answer를 열고 닫을 때 transition을 주는 방법은 있습니다. 이전에 display: none, display: block을 사용했던 방식과는 다르게 height값을 이용해서 애니메이션 효과를 줄 수 있을 거에요.
- panel-answer의 높이값을 0으로 초기화합니다.
- .active 클래스가 추가될 경우, 높이를 설정해줍니다. (예를 들어, height: 100px)
- transition: height 0.3s; 를 설정합니다.
- active 클래스가 제거될 경우, 다시 높이를 0으로 설정합니다.
이렇게 설정해주시면, 닫을 때도 애니메이션 효과가 적용될 거에요. 자세한 내용은 CSS에서 transition 속성을 참고하시면 도움이 될 거에요.
그리고 참고로, panel-answer의 display 속성과 height 속성을 함께 사용하시는 것은 의미가 없으니 주의해주세요!
감사합니다.
수강자료 다운로드 관련 문의
0
15
2
선택정렬 이해하기 & 구현하기
0
8
1
mission12-01 guide.md파일 누락
0
13
1
자료집 관련
0
22
2
13. (App 2) 기본기 훈련 에서
0
31
1
챌린지 시작일 문의
0
38
0
2. 어떤 도구를 사용하는 것이 가장 유리할까? 강의 중
0
27
1
11차시 Antigravity IDE 설치 후
0
30
1
처음 에이전트 설정을 잘못 했을 경우 수정 하는 방법
0
35
1
5,6,7,8 내용이 없어요
0
33
1
ThemeProvider를 이용해서 NextThemeProvider를 따로 생성하여 Layout.tsx에 적용하는 이유는 뭘까요?
0
30
1
mission 09-01 을 수행할 수 없어요
0
33
1
Context API vs Zustand 그리고 Auth
0
39
2
순수 함수 / 순수 컴포넌트
0
26
1
css box-sizing 관련 질문
0
35
2
스니펫이 이상해요
0
34
2
Editor Component의 최적화 불가능 이슈
0
39
2
useCallback ⊂ useMemo
0
38
2
깃허브 저장소를 어디에 첨부하셨나요?
1
42
1
nestjs 강의는 없나요??
1
41
2
스타터 저장소
1
45
1
로컬스토리지 예제2번 값이 없습니다.
0
269
1
null
0
346
0
css적용이 id만 안되는데 어떻게 하죠 .. ㅠㅠ
0
574
1