Transition property doesn't apply

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' );            
  }
});