使用CSS動畫運行緩慢

http://benliger.webatu.com/

進出口創造一個移動導航菜單，並決定使用CSS在移動視圖動畫的下拉作用的過程。這裏我擔心的是菜單運行時非常「笨重」（動畫在頁面上彈出菜單而不是平滑過渡）。它在桌面瀏覽器上調整大小時看起來很好，但我期望移動設備上的動畫更流暢。移動設備即時通訊是一個宏達電一個迷你如此相當新的手機。它的動畫方式就是通過添加和刪除具有不同邊距的類。誰能告訴我爲什麼它的運行如此糟糕？

代碼：

$('.mobile-menu-icon').click(function() { 

$(".header-options").toggleClass("mobileheaderdown"); 
}); 


.header-options { 
color:white; 
transition: all 0.5s ease-in-out; 
-moz-transition:all 0.5s ease-in-out; 
-o-transition:all 0.5s ease-in-out; 
-webkit-transition: all 0.5s ease-in-out; 
margin-left:0px; 
list-style-type:none; 
font-size:18px; 
margin-top: -203px; 
background-color: rgba(0, 0, 0, 0.91); 
width:100%; 
text-align: center; 
float: right; 
} 

.mobileheaderdown{ 
margin-top:2px !important; 
}

感謝，本

來源

2014-10-02 red house 87

發佈您的代碼？ – 2014-10-02 13:42:49

是否有一個原因，你是動畫邊緣頂而不是使用translate3d？你可以利用硬件加速和後面的 – imjared 2014-10-02 13:44:43

代碼發佈。沒有理由Imjared你能不能建議代碼應該看翻譯3D？我可以儘快測試並檢查更好的結果，我只是假設過渡會產生同樣的效果 – 2014-10-02 13:50:22

邊距不是被加速移動的屬性。你可以通過使用transform來做安全的效果：翻譯是加速的。

編輯：例：

.header-top { 
    -webkit-transform:translate(0,-203px); 
    -ms-transform:translate(0,-203px); 
    transform:translate(0,-203px); 
} 
.header-top.mobileheaderdown { 
    -webkit-transform:translate(0,0); 
    -ms-transform:translate(0,0); 
    transform:translate(0,0); 
}

來源

2014-10-02 14:26:56 scooterlord

這已經修復了性能問題（一旦我添加！移動headerdownclass的結尾），但現在當你第一次點擊手機上的按鈕時，菜單變得向右移動，然後每次點擊按鈕時左右保持幾個像素左右的變化。@scooterlord – 2014-10-02 14:41:46

它確實這在移動設備上，但不是在桌面上調整大小的瀏覽器.. – 2014-10-02 14:42:47

答案關注性能問題，而不是你的實際設計。你應該避免的是，手機的margin-top不會加速，你應該找到另一種方法 - 答案只是一個建議。 – scooterlord 2014-10-02 14:49:55

使用CSS動畫運行緩慢

回答

相關問題