Inflearn コミュニティ Q&A
投稿した質問数
아코디언 (3/6) css transition 추가 부분 max-height 질문
解決済みの質問
作成
·
403
1
안녕하세요, 수강 중에 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;
}
}reacttypescriptdomuivanilla-js
回答 2
1
jaenam
インストラクター
보다 정확한 설명이 필요한 것 같군요!
height: auto에서는 애니메이션이 발생하지 않습니다.
보나님께서 애니메이션이 작동한다고 느낀 부분은 사실 height와 무관합니다.
padding-top 및 padding-bottom이 0px이었다가 15px로 변하면서, 이 부분이 늘거나 줄어들 뿐입니다.
height는 transition에 따라 값이 늘어나거나 줄어들지 않고, 즉각적으로 최대높이가 되거나 0으로 변경됩니다.
height: auto에 의해서는 정확한 높이값을 인지하지 못하기 때문입니다.
padding을 0으로 고정시키거나,
transition을 height에 대해서만 적용해 보세요.
0
비교해보니, 애니메이션이 발생하긴하지만 max-heignt 속성으로 적용했을 때가 더 부드럽게 되는 것 같습니다.. 차이가 없는 줄 알고 질문을 했었는데, 차이가 있네요.😅 답변 주셔서 감사합니다!
그러네요, padding을 0으로 둬보니 애니메이션이 아예 발생하지않네요... 모호하게 그저 애니메이션이 어색하다고 넘어갈 뻔 했는데 정확하게 알려주셔서 감사합니다. css도 아직 모르는게 참 많다고 느낍니다😂 답변 감사합니다!!