아코디언 (3/6) css transition 추가 부분 max-height 질문
안녕하세요, 수강 중에 css transition 파트에서 궁금증이 생겨 질문 드립니다. max-height 속성을 이용해서 애니메이션을 적용해주셨는데, 아래 방식처럼 height를 0, auto로 애니메이션 주는 것과 차이가 있을까요?
.item3 {
overflow: hidden;
.description {
padding: 0 15px;
border-bottom-width: 0;
// max-height: 0;
height: 0;
transition: ease 0.3s;
}
&.current .description {
padding: 15px;
border-bottom-width: 1px;
// max-height: 300px;
height: auto;
}
}回答 2
1
보다 정확한 설명이 필요한 것 같군요!
height: auto에서는 애니메이션이 발생하지 않습니다.
보나님께서 애니메이션이 작동한다고 느낀 부분은 사실 height와 무관합니다.
padding-top 및 padding-bottom이 0px이었다가 15px로 변하면서, 이 부분이 늘거나 줄어들 뿐입니다.
height는 transition에 따라 값이 늘어나거나 줄어들지 않고, 즉각적으로 최대높이가 되거나 0으로 변경됩니다.
height: auto에 의해서는 정확한 높이값을 인지하지 못하기 때문입니다.
padding을 0으로 고정시키거나,
transition을 height에 대해서만 적용해 보세요.
1
그러네요, padding을 0으로 둬보니 애니메이션이 아예 발생하지않네요... 모호하게 그저 애니메이션이 어색하다고 넘어갈 뻔 했는데 정확하게 알려주셔서 감사합니다. css도 아직 모르는게 참 많다고 느낍니다😂 답변 감사합니다!!
0
height: auto로 했을 때 애니메이션이 잘 되나요?
문제 없이 된다면 okay인데, 안된다면 왜 안될까요?
0
비교해보니, 애니메이션이 발생하긴하지만 max-heignt 속성으로 적용했을 때가 더 부드럽게 되는 것 같습니다.. 차이가 없는 줄 알고 질문을 했었는데, 차이가 있네요.😅 답변 주셔서 감사합니다!
강의 난이도에대해서
0
104
1
강의자료 관련 질문
0
64
2
게시판 리스트 만들때 어디부터 use client를 적용할 지 모르겠어요
0
135
1
강의 연장관련
0
174
2
Tooltip-useSyncExternalStore()에 함수 넘기는 방식에 대해...
0
222
3
textarea 에서 body 무한깜빡현성 질문 드립니다.
0
132
2
닫힌 상태에서 문자열은 찾아지는데 열리진 않아요
0
146
2
scrollSpy 바닐라버전에서 data-index를 찾는 코드 질문
0
128
2
[#보일러플레이트 코드 사용법 문의] 강의자료[보일러플레이트] 사용법에 대해서 문의 드려요
0
318
2
무한스크롤 리액트버전 | 16분 31초
0
176
2
강의자료 github link 404 빈페이지
0
263
2
강의 정리에 대한 블로그 정리 글 게시 문의
0
301
1
[아코디언 1/6 챕터] 클로저 활용 질문 있습니다.
2
444
2
item7 style이 강의자료에 없습니다.
0
291
1
이벤트 핸들러가 Root에 모이면
0
304
1
append와 insertAdjacentElement 차이가 무엇일까요?
0
324
1
아코디언 1/6 강좌 클로져 관련 질문입니다.
0
380
1
gnb 만들기를 실무 next js 프로젝트에서 사용할수 있나요?
1
614
2
학습자료 관련해서 질문있습니다.
0
550
1
무한스크롤 강의 관련 질문입니다.
0
311
1
반응형 TextBox 질문입니다.
0
478
1
Tooltip의 useStyleInView 훅 질문입니다.
0
253
1
이벤트에 대한 타입을 지정할 때 궁금한 점이 있습니다.
0
313
1
gnb 를 이렇게 수정해 봤어여
0
640
1