1번 아코디언 게시판 재클릭 시 height 0 주는 법
510
작성한 질문수 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 속성을 함께 사용하시는 것은 의미가 없으니 주의해주세요!
감사합니다.
MSA 와 BFF 아키텍처 설명 부분에 대한 문의
0
10
0
eslint.config.js 설정 질문입니다.
0
27
2
7강 흐름 제어 아키택쳐 코드 순서
1
28
1
수업자료 어디서 찾아볼 수 있나요?
0
25
1
함수 강의의 정답.. 어떤가요?
0
21
0
깃권한요청드립니다
0
28
1
<div id="banner">배너 이미지</div> 관련 질문
0
27
1
강의자료
0
33
1
윈도우에서 Node js를 설치하고 싶어요
0
34
0
addToFile function에서 path를 사용해 새로운 파일을 생성
0
41
1
[46강] EventEmitter를 활용한 10가지 패턴 중 플러그인 아키텍처
0
38
2
강의가 누락된것 같습니다.
0
45
2
용어 발음법이 계속 바뀌는 것 같은데 이런 부분들 개선이 가능할까요...?
0
54
1
counter01.html은 어디있을까요?
1
18
1
존재하지 않는 일기 url입력 시 alert이 두 번 떠요
0
44
1
useState 직접 구현 부분에서 질문이 있습니다.
1
46
1
학습을 하고 블로그에 정리를 해도 괜찮을까요?
1
45
1
교재(3쇄)와 강의 내용 문의
0
39
2
섹션2번 부분 강의 화면이 잘 못된것 같아서 문의합니다.
0
24
1
call stack 표현이 잘못표현된것이 아닌가요?
0
83
2
React 와 Virtual DOM 의 이야기 영상 실행이 안됩니다.
0
35
1
로컬스토리지 예제2번 값이 없습니다.
0
267
1
null
0
345
0
css적용이 id만 안되는데 어떻게 하죠 .. ㅠㅠ
0
565
1