1번 아코디언 게시판 재클릭 시 height 0 주는 법
536
投稿した質問数 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 속성을 함께 사용하시는 것은 의미가 없으니 주의해주세요!
감사합니다.
10월 15일 삭제예정 강의 문의
0
44
1
강의제목에 10/15일 삭제라고 나와있는데,
0
50
1
스크립트 영상 미일치
0
82
3
감정일기장 다이어리 필터 적용할때 컨텍스트를 Home에서 가져오는 특별한 이유가 궁금합니다.
0
63
2
강의 설명 중에 헷갈리는 것이 있네요
0
62
1
수업자료 관련 문의
0
75
3
1강 동영상 재생 오류
1
71
2
Composition단계에서 `Layer`는 누가 만드는지
0
49
1
Strict Mode 예시 질문!
0
66
2
수업이 안보여요
0
67
1
저자 블로그에 있는 강의는 어떤 강의인가요?
1
68
1
[해결됨]윈도우즈 환경에서 타입 스크립트 파일이 실행이 안됩니다.
1
89
5
4강 카드뉴스 자동화 자료가 안보입니다!!
0
112
2
윈도우즈 환경에서 진행중입니다.
0
65
2
4강 카드뉴스 자동화 자료
6
128
1
라이브 강의 영상 녹화본이 있을까요?
0
103
1
인증이 늦었습니다ㅜㅜ 확인부탁드립니다
0
94
1
스웨거 접속이 안되는데 확인 부탁드립니다.
0
65
1
설명이 잘못된거같습니다.
1
81
2
수강자료 다운로드 관련 문의
0
115
2
선택정렬 이해하기 & 구현하기
0
62
1
로컬스토리지 예제2번 값이 없습니다.
0
282
1
null
0
357
0
css적용이 id만 안되는데 어떻게 하죠 .. ㅠㅠ
0
591
1