CSS3採集/ Zepto toggleClass點擊延遲

我正在嘗試使用Zepto animate和CSS3轉換爲動畫div的左側，然後再次點擊按鈕。爲此，我使用了toggleClass，它使用margin-right的樣式添加和刪除一個類：-0;CSS3採集/ Zepto toggleClass點擊延遲

所有工作正常，但當點擊按鈕切換課程時，我在移動設備上遇到了非常小的延遲。我已經使用動畫工作，沒有任何延遲，但CSS3轉換是硬件加速，所以我希望能使動畫稍微平滑。

本質上，當我點擊按鈕來切換動畫時，在它發生之前會有一個非常微小的停頓，我想擺脫這種情況。

代碼如下，任何人有任何想法，爲什麼我得到這個輕微的延遲？我的猜測是，這是關於如何快速切換一個類，並將其樣式讀取？

任何幫助/見解都很感謝！

#side-menu { 
    float: right; 
    height: 100%; 
    width: 80%; 
    overflow: scroll; 
    margin-right:-1024px; 
    box-shadow: 4px 0 5px #484848 inset; 
    -webkit-box-shadow: 4px 0 5px #484848 inset; 
    -moz-box-shadow: 4px 0 5px #484848 inset; 
    background: linear-gradient(#444444, #333333) repeat scroll 0 0 #595858; 
    background: -webkit-linear-gradient(#444444, #333333) repeat scroll 0 0 #595858; 
    background: -moz-linear-gradient(#444444, #333333) repeat scroll 0 0 #595858; 
    background: -o-linear-gradient(#444444, #333333) repeat scroll 0 0 #595858; 
    -webkit-transition: margin-right 1s ease-in-out; 
    -webkit-transform: translate3d(0, 0, 0); 
    -webkit-transform: translateZ(0); 
} 

.sideMenuToggle{margin-right: 0 !important;} 




$('#menu_toggle').on('click', function(){ 
    $('#side-menu').toggleClass('sideMenuToggle'); 
})

來源

2013-05-31 woolm110

我只是猜測它，所以可能是錯的。當您開始轉換時菜單仍然可見。可能是-1024px正在設置它，不僅看不見，而且遠離視線，它需要一段時間才能到達屏幕邊界？順便說一下，你正在嘗試使用-webkit-transform來獲得GPU加速，但是爲它設置2個屬性是沒用的，只有一個屬性會被應用。 – vals

你能把一個小演示放在一起嗎？ – 2ne

這很可能是瓦爾斯所說的：菜單看起來很不正常，而不僅僅是一個小小的視線。要修復它，你應該能夠更改爲margin-right: -80%。這樣，保證金的權利和寬度是一樣的，它只是在視野之外。

現在填充，邊框和陰影可能會導致它仍然顯示一點。您可以通過將元素更改爲box-sizing: border-box來處理前兩項，這將使其變得如此width表示包含的總寬度，填充和邊框，並且它們的大小將從完整元素大小中減去。瞭解更多關於在這裏：

http://css-tricks.com/box-sizing/

盒子陰影但是仍將呈現。所以，也爲他們製作動畫！添加transition: box-shadow 1s並從box-shadow: 4px 0 5px rgba(0,0,0,0)開始，然後將box-shadow: 4px 0 5px #484848添加到您的sideMenuToggle類。

希望有幫助！（PS這些都沒有經過測試，所以我甚至不知道你是否可以動畫盒陰影。你應該可以，雖然你可能需要將＃484848轉換爲RGBA值才能工作。）

來源

2013-09-05 21:28:01 CourtDemone

CSS3採集/ Zepto toggleClass點擊延遲

回答

相關問題