转换属性不适用

在我的页面上，单击链接会在屏幕上显示菜单，同时推动页面为菜单腾出空间。它都是用transition 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;
}

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

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