Свертывание боковой панели гладко

Question

Я создал боковую панель, которая рушится, когда экран становится маленьким. Появится кнопка, чтобы открыть/закрыть ее. Я использовал переход, чтобы скрыть/показать боковую панель хорошим способом.

Боковые панели <div> скрывается с эффектом, но содержимое боковой панели просто исчезает без какого-либо эффекта. Когда я внимательно смотрю на поведение открытия, я вижу, что меню появляется сначала в полном объеме, а затем появляется боковая панель с ее эффектом. Я также хочу, чтобы эффект отображался в содержимом меню.

Все в макете. CSS и немного кода в layout.js

Demo: удалены

Желаемый эффект: http://detail.herokuapp.com/index.html

Answer 1

Добавить transition: left .3s ease; на # боковой панели-нав.

Я рекомендую вам прочитать http://www.sitepoint.com/css3-sliding-menu/

Answer 2

Порядок стопка боковой панели находится над содержанием. Вы можете изменить это с изменением:

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

Answer 3

Добавить переход к врезке-Nav, что все!

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