transform：translateX對左側屬性的過渡。哪個有更好的表現？ CSS

我正在製作HTML和CSS3的滑出菜單 - 特別是過渡。transform：translateX對左側屬性的過渡。哪個有更好的表現？ CSS

我想知道什麼是最佳實踐/最佳性能水平滑動相對定位的股利。當我點擊一個按鈕時，它會向我的div添加一個類。哪個班更好？（注意，我可以稍後添加所有瀏覽器前綴，本網站僅針對現代瀏覽器）。

//option 1 
.animate{ 
    -webkit-transition:all ease 0.3s; 
    -webkit-transform:translateZ(200px); 
} 

//option 2 
.animate{ 
    -webkit-transition:all ease 0.3s; 
    left:200px; 
}

感謝

來源

2012-11-16 JackMahoney

http://blog.alexmaccaw.com/css-transitions –

通過轉換好得多移動設備上的翻譯進行！

編輯：這裏是一個現場演示。使用translateX和translateY的轉場比top，bottom，left和right平滑得多。 jsFiddle Demo for mobile devices

來源

2013-01-17 16:53:39

這個任何的測試或文章？ – JackMahoney

我正在爲iPad構建一個web應用程序。而translateX和translateY的性能比左，右，上，下都要好得多。但是，如果您只爲桌面瀏覽器構建它，您將看不到任何區別。還有另一個區別。如果左側爲動畫：100％元素將動畫爲父寬度的100％。如果您將translateX（100％）設置爲動畫元素，則會將元素設置爲自身寬度的100％。我目前還沒有任何測試或文章 - 只是我的經驗;）但我今天會準備一個jsFiddle ... –

這裏看看這個。只需在左側懸停（或點擊移動設備）即可。 translateY轉換在我的iPad 3上更平滑。http://jsfiddle.net/philippkuehn/wLm87/ –

translateX和translateY比左，右，上，下和jQuery動畫版本要流暢得多。與演示更深的詳情，請參閱本：

http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

來源

2013-12-27 12:55:03

transform：translateX對左側屬性的過渡。哪個有更好的表現？ CSS

回答

相關問題