1번 아코디언 게시판 재클릭 시 height 0 주는 법
509
投稿した質問数 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 속성을 함께 사용하시는 것은 의미가 없으니 주의해주세요!
감사합니다.
존재하지 않는 일기 url입력 시 alert이 두 번 떠요
0
19
1
useState 직접 구현 부분에서 질문이 있습니다.
1
27
1
학습을 하고 블로그에 정리를 해도 괜찮을까요?
1
30
1
교재(3쇄)와 강의 내용 문의
0
30
2
섹션2번 부분 강의 화면이 잘 못된것 같아서 문의합니다.
0
23
1
call stack 표현이 잘못표현된것이 아닌가요?
0
66
2
React 와 Virtual DOM 의 이야기 영상 실행이 안됩니다.
0
34
1
일반 강의와 차이점?
1
53
1
!= 연산자의 역할
0
35
1
중요하진 않지만 설명하신부분에서 안된부분..
1
37
1
강의 듣는 순서가 어떻게 되나요?
0
50
1
stopPropagation()에 대해서 질문 있습니다.
0
50
2
12.13) 하단 여백 스타일링 관련 질문 드립니다.
0
65
2
27강 Context내 RSC 사용 관련 문의
0
85
3
혹시 다음 강의 제작 예정된 것들이 있을까요?
0
81
1
Enable Linting 항목을 찾을수가 없습니다.
0
46
2
에러 질문드립니다
0
63
2
1강 질문
0
70
2
윈도우에서는동작줄이기가어디에있을까요??
0
34
1
백오피스를 개발할 때 아키텍처 구성에 대한 질문
0
58
3
ai가 만든 강의인가요?
0
147
1
로컬스토리지 예제2번 값이 없습니다.
0
264
1
null
0
345
0
css적용이 id만 안되는데 어떻게 하죠 .. ㅠㅠ
0
563
1