(CSS) height와 width값이 auto일때 transition 사용하기

transition 속성은 CSS값이 변화할때 부드러운 애니메이션을 추가할 수 있도록 해준다.

 

height값과 width값에 transition속성을 적용하기 위해서는 vw, vh, px등의 정확한 값이 필요하다.

 

auto값을 사용하거나 아무값을 지정해주지 않으면 시작과 끝 지점을 명확히 할 수 없어 transition이 작동하지 않는다.

 

.list-box {
    height: 150px;
    opacity: 1;
    transition: all 1s;
}
.hidden {
    height: 0px;
    opacity: 0;
}

height값을 150px로 주고 일정행동시 class를 hidden으로 toggle하도록 하여 transition을 구현했다.

(opacity 속성은 투명도 속성으로 transition을 통해 점점 투명해지는 효과를 준다)

 

기본적으로 transition은 명시적인 값이 필요하지만 조금의 편법을 쓰면 auto값에 transition효과를 적용할 수 있다.

 

 

 

max-height, max-width 값을 활용

 

height에 auto를 주더라도 페이지 레이아웃의 특성에따라 사이즈가 커질 수 있는 한계가 존재한다.

이때 max-height값을 한계값보다 더 크게 지정하면 transition을 사용할 수 있다.

.list-box {
    height: auto;
    max-height: 200px;
    opacity: 1;
    transition: all 1s;
}
.hidden {
    max-height: 0;
    opacity: 0;
}

페이지에서 list-box가 담고있는 요소들은 auto를 주더라도 최대 150px정도를 차지한다.

list-box가 가질수 있는 최대 height보다 더 높은 max-height값을 주어 transition을 사용한다.

 

 

 

transform 사용

 

transform:scaleY()는 세로길이를, transform:scaleX()는 가로길이를 조절할 수 있다.

height나 width값이 auto라도 transform기능은 정상적으로 작동한다.

 

.list-box {
    height: auto;
    opacity: 1;
    transition: all 1s;
    transform: scaleY(1);
    transform-origin: top;
}
.hidden {
    transform: scaleY(0);
    opacity: 0;
}

transform의 scaleY속성을 1에서 0으로 transition하여 효과를 구현한다.

 

단 transform속성을 사용하면 하위 요소들의 형태가 유지되지 않고 함께 조절되어 형태가 뭉개지는 현상이 생길 수 있다.

transform-origin을 top으로 두면 형태가 변할때 위를 기준으로 변하도록 변경할 수 있다.