애플코딩에서 상단 이미지 처럼 리스트가 슬라이드 하면서 내려오는 모션을 구현하는 과제를 받았다.
처음에는 li태그를 감싸고있는 div 태그에 height : 0px 값을 추고, 클래스 show를 하나 만들어서 height : 400px값을 지정해줬다.
(자바스크립트 toggle를 이용하여 아이콘 클릭시 height값이 길어지게 하려고)
원하는대로 구현되기는 하나
나중에 유지보수가 힘들 것 같다는 생각이 들어서 방법을 바꿔보았다.
(만약 li태그가 더 추가된다면 그 높이를 계산해서 height값을 다시 지정 해줘야함)
먼저 height 값을 지정해주지 않고
.show 에 height : 400px 값을 height:unset으로 바꿔주었는데
그랬더니 transition이 제대로 동작하지 않았다.
확인해보니 transition은 시작값과 끝 값을 정확하게 지정해줘야하는데
unget이란 속성은 값이 지정되어 있는게 아니기 때문에
transition이 제대로 동작하지 않는 것 이였다.
그래서
유지보수에 조금이라도 유리하게 하려면 어떻게 해야할지 찾아보니
max-height값으로 적용하면 될거같았다.
li태그를 감싸고있는 div에는 max-height : Opx
.show에 각각 max-height: 400px로 주니 transition이 제대로 동작했다.
이번과제를 통해
transtion은 시작값과 끝 값을 정확하게 지정을 해줘야 동작하며,
자식을 감싸고 있는 부모 태그의 크기를 정확하게 지정해줘야한다는 사실을 알았다.
max-height?
css 속성은 요소의 최대 높이를 설정합니다. 숙성의 사용된 값이 다음에 대해 지정된 값보다 커지는 것을 방지합니다.
