이 탐색에 '슬라이드 인'CSS3 전환을 구현하려면 어떻게해야합니까?

Question

나는 CSS3와 자바 스크립트를 사용하지 않고 모바일 친화적 인 탐색을 만들 수 있도록 '체크 박스 해킹'을 조사해 왔습니다.

나는이 예제를 찾고 있었어요 : http://codepen.io/TimPietrusky/pen/gqlhA

모바일 내비게이션에 도착하는 브라우저의 폭을 줄이고 대신 햄버거 아이콘을 클릭하고 탐색이 갑자기 나타납니다 데, 내가 가진려고 해요 사용자가 아이콘을 다시 한 번 누르면 아래로 내려간 후 다시 백업됩니다.

저는 css3 전환 속성을 사용할 수 있음을 알고 있습니다. 높이를 UL로 설정하고 사용하려고 시도했습니다.

transition: height 1s linear; 

이것은 작동하지 않습니다. 나는 체크 박스가 체크 된 후 초기 높이를 0으로 설정하고 높이를 100 %로 설정하면 작동 할 것이라고 생각했다. 나는 이것을 알아낼 수 없다. 나는이 부동산에 대해 아주 신감이 많아서 어떤 도움도 정말 감사 할 것입니다.

고맙습니다.

Answer 1

나는 transitioning height doesn't always work을 발견했습니다. 대신 최대 높이 사용 시도