1번 아코디언 게시판 재클릭 시 height 0 주는 법
504
4 asked
1번 강의 아코디언에서
panel-answer를 display block, display none 으로 줘서 div 열었다 닫을때
transition 주는 방법이 있나요?
아니면 강의 내용처럼 panel-answer 의 height을 0으로 줬다가 .active로 높이 주고나서
다시 클릭하여 닫을 때 어떻게 해야하나요?
Answer 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 속성을 함께 사용하시는 것은 의미가 없으니 주의해주세요!
감사합니다.
3강 질문
0
15
1
74. 데이터 캐시 - 1 (이론) 강의 영상 누락
0
26
1
2강 nodejs 3단계 설명 질문
0
33
1
imagesLoaded에 관한 질문
0
19
2
useEffect와 lifecycle문의
0
26
2
프론트엔드 학습 수준 문의
0
37
2
리액트 챕터별 코드에서 eslint 설정파일이 없어요
0
47
2
최근 코테, 과제 테스트 트렌드
0
67
2
lucide react 아이콘 설치
0
46
2
17강 zustand store 서버에서 생성
1
36
1
문의관련 문의
0
44
2
next.js 를 2대이상 실행하는 경우 제공하는 cache 기능들은 어떻게 되나요?
0
55
2
76. 전문성 더하기: 놓치면 아쉬운 관련 기술들 수업 자료가 없어요.
0
47
2
ai 도구 질문
0
31
1
저는 왜 콘솔에서 props가 한 줄만 찍히나요?
0
47
1
렌더링 차단 리소스 javascript 실행에 관련해서 질문 있습니다.
0
47
2
데이터 로딩중 화면만 계속 나와요!!
0
54
2
퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요
0
79
2
02-04 layout.tsx 구조가 달라요
0
59
2
불변성을 지키며 수정 삭제를 할때도 Map이 유리한가요?
0
54
1
개인 프로젝트로 앱 개발해서 다운로드 1300 달성했는데 어느 정도 의미가 있을까요? (안드로이드 개발자)
0
69
1
로컬스토리지 예제2번 값이 없습니다.
0
259
1
null
0
345
0
css적용이 id만 안되는데 어떻게 하죠 .. ㅠㅠ
0
556
1