轉換屬性不適用

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

您需要#top_menu指定left: 0。

它會將top_menu的左邊緣設置在其最近定位的祖先的右邊緣的右邊#mobile_menu。所以他們會一起過渡。

Answer 2

一切都很好，你只是錯過了left 0加入#top_menu。

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