[css]Height :auto; 일때 transition이 작동되지 않을 때

[css]Height :auto; 일때 transition이 작동되지 않을 때

클래스에 height:auto; 값을 준뒤 height의 값을 변경 하였을 때 transition이 적용되지 않는 이슈가 발생하였습니다.

display : none / block; 설정처럼 transition이 적용 되지 않는 이슈 입니다.

 

원인

height:auto는 height의 값을 계산하지 못하기 때문에 transition이 작동하지 않는다.

 

해결

따라서 이것을 max-height을 사용하여 수정하였습니다.

구글링하면서 이슈를 확인 해본 결과 max-height을 사용하여 해결했다는 포럼의 글들이 많이 보였습니다.

.item.on{ max-height : 90px;}
.item {max-height: 200vh; transition:1s;}

 

위의 코드를 사용하여 문제를 해결하였습니다.