过渡属性不适用

Question

On my page , clicking on a link brings a menu to the screen while pushing the page to make room for the menu. It's all animated with transition CSS property. For some reason though, some elements get correctly animated while others don't: specifically, the top bar gets no animation at all. Can anybody tell me why?

CSS

#top_menu {
    position: absolute;
    top: 0;
    background: #eee;
    padding: 20px;
    width: 100%;
}
#mobile_menu {
    position: absolute;
    left: -280px;
    background: #ddd;
    width: 280px;
    height: 100%;
    z-index: 99;

}
.left_0 {
    left: 0 !important;
}
.left_280 {
    left: 280px !important;
}
.left_minus_280 {
    left: -280px !important;
}
body,
.wrap,
#mobile_menu,
#top_menu {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

HTML

<div id='wrap'>
  <div id='mobile_menu'>
    mobile menu
  </div>
  <div id='top_menu'>
    <a href='#'>menu</a>
  </div>
</div>

JavaScript

$( '#top_menu a' ).click(function() {
  $( "#mobile_menu, #top_menu, #wrap" ).removeClass();
  if( $('#mobile_menu').css('left') == '-280px' ) { 
    $( "#mobile_menu" ).addClass( 'left_0' );           
    $( "#top_menu" ).addClass( 'left_280' );  
    $( ".wrap" ).addClass( 'left_280' );  
  }
  else { 
    $( "#mobile_menu" ).addClass( 'left_minus_280' ); 
    $( "#top_menu" ).addClass( 'left_0' );  
    $( ".wrap" ).addClass( 'left_0' );            
  }
});

Answer 1

Everything is fine, you just missed left 0 to add in #top_menu .

#top_menu {
    position: absolute;
    top: 0;
    background: #eee;
    padding: 20px;
    width: 100%;
    left:0;
}

Answer 2

You need to specify left: 0 in #top_menu .

It'll set the left edge of the top_menu to the right of the right edge of its nearest positioned ancestor #mobile_menu . So they will make a transition together.