css - 过渡属性不适用

Question

On my page , 单击链接会在屏幕上显示菜单，同时插入页面为菜单腾出空间。全部使用 transition CSS 属性进行动画处理。但出于某种原因，一些元素得到了正确的动画效果，而另一些元素则没有:具体来说，顶部栏根本没有动画效果。谁能告诉我为什么？

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

一切都很好，您只是错过了 left 0 以添加到 #top_menu。

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