인프런 커뮤니티 질문&답변

보나님의 프로필 이미지
보나

작성한 질문수

[React / VanillaJS] UI 요소 직접 만들기 Part 1

아코디언 (3/6) css transition 추가 부분 max-height 질문

해결된 질문

작성

·

215

0

안녕하세요, 수강 중에 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에 대해서만 적용해 보세요.

보나님의 프로필 이미지
보나
질문자

그러네요, padding을 0으로 둬보니 애니메이션이 아예 발생하지않네요... 모호하게 그저 애니메이션이 어색하다고 넘어갈 뻔 했는데 정확하게 알려주셔서 감사합니다. css도 아직 모르는게 참 많다고 느낍니다😂 답변 감사합니다!!

0

정재남님의 프로필 이미지
정재남
지식공유자

height: auto로 했을 때 애니메이션이 잘 되나요?

문제 없이 된다면 okay인데, 안된다면 왜 안될까요?

보나님의 프로필 이미지
보나
질문자

비교해보니, 애니메이션이 발생하긴하지만 max-heignt 속성으로 적용했을 때가 더 부드럽게 되는 것 같습니다.. 차이가 없는 줄 알고 질문을 했었는데, 차이가 있네요.😅 답변 주셔서 감사합니다!

보나님의 프로필 이미지
보나

작성한 질문수

질문하기