부드럽게 사이드 바를 뒤틀다

Question

화면이 작아 질 때 붕괴되는 사이드 바를 만들었습니다. 그런 다음 버튼을 열거 나 닫으십시오. 좋은 방법으로 사이드 바를 숨기거나 표시하는 전환을 사용했습니다.

사이드 바 <div>은 효과가 없지만 사이드 바의 콘텐츠는 아무런 영향을받지 않고 사라집니다. 시작 동작을 면밀히 살펴보면 메뉴가 처음 표시 될 때 사이드 바가 효과가 나타나는 것을 볼 수 있습니다. 나도 메뉴 내용에 효과를 원한다.

모든 것이 레이아웃에 있습니다. CSS와 약간의 코드 layout.js에

데모입니다 : 이

을 제거 원하는 효과 : http://detail.herokuapp.com/index.html

Answer 1

# sidebar-nav에 transition: left .3s ease;을 추가하십시오.

나는 당신이 그것을이다-탐색을 사이드 바에 http://www.sitepoint.com/css3-sliding-menu/

Answer 2

사이드 바의 스택 순서는 내용 이상입니다. 다음을 변경하여 변경할 수 있습니다.

#sidebar-nav { 
z-index:0; 
} 

Answer 3

추가 전환을 읽을 것을 권장합니다!

#sidebar-nav{ 
-webkit-transition: all 0.2s ease-in-out;// I am adding webkit please add the rest yourself. 
}