Documents

Draft
  • account_tree
  • bug_report

크기 관련 애니메이션 처리에서 auto값에 대한 이슈

transition, animation 속성을 이용한 크기(width, height) 애니메이션 적용시 auto 값에 대한 문제점을 확인하고 해결 방법을 모색해본다.

height 값을 0으로 설정한 후 자신의 콘텐츠가 갖는 높이만큼 크기 변화를 갖는 CSS만의 애니메이션을 설정할 수 있다. 이 경우 auto 값을 목표값으로 해서 높이를 이용한 슬라이드 움직임을 줄 수 있다고 생각할 수 있다. 하지만 실제로는 auto값이 절대값으로 인식되지 않는다. 따라서 크기 변화를 갖는 부드러운 슬라이드 움직임을 가질 수 없다.

그래서 auto 대신에 절대 값을 지정하여 문제를 해결할 수 있겠지만 콘텐츠의 높이를 예측할 수 없는 상태에서는 좋은 방법은 아니다. 물론 자바스크립트를 활용하여 이 문제를 해결할 수 있겠지만 CSS 만으로는 해결책이 없어 보인다.

하지만 절대값을 지정할 수 있는 또 다른 max-height 속성을 이용한다면 완전한 방법은 아니지만 결과는 성공적이다.

max-height는 최대 높이를 지정하는 속성으로 0이라면 높이가 없는 height 속성 값인 0과 똑같다. 그리고 목표 값을 역시 max-height 속성을 사용하여 명시적으로 지정하면 된다. 이때 가지고 있는 콘텐츠 양에 의한 높이가 예측이 안되는 경우에도 max-height 값 범위 내에 있다면 max-height 값 이상으로 커지지 않을 것이다.

해결은 했지만 이 방법 역시 가용 콘텐츠 양보다 높은 값으로 max-height 값을 지정해야 한다는 단점이 있다. 또한 애니메이션 처리 메커니즘에 있어서도 최적화되지 않을 수 있다.(더 많은 연산을 필요로 할 수 있다.)