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

보나님의 프로필 이미지

작성한 질문수

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

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

해결된 질문

24.07.07 18:44 작성

·

151

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

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

2024. 07. 12. 00:11

보다 정확한 설명이 필요한 것 같군요!

height: auto에서는 애니메이션이 발생하지 않습니다.
보나님께서 애니메이션이 작동한다고 느낀 부분은 사실 height와 무관합니다.
padding-top 및 padding-bottom이 0px이었다가 15px로 변하면서, 이 부분이 늘거나 줄어들 뿐입니다.
height는 transition에 따라 값이 늘어나거나 줄어들지 않고, 즉각적으로 최대높이가 되거나 0으로 변경됩니다.
height: auto에 의해서는 정확한 높이값을 인지하지 못하기 때문입니다.

padding을 0으로 고정시키거나,
transition을 height에 대해서만 적용해 보세요.

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

2024. 07. 13. 15:51

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

0

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

2024. 07. 08. 09:30

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

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

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

2024. 07. 11. 23:58

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

보나님의 프로필 이미지

작성한 질문수

질문하기