2012-11-16 26 views
12

मैं HTML और CSS3 के साथ एक स्लाइड आउट मेनू बना रहा हूं - विशेष रूप से संक्रमण।परिवर्तन: बाएं संपत्ति पर translateX बनाम संक्रमण। किसके बेहतर प्रदर्शन है? सीएसएस

मैं जानना चाहता हूं कि अपेक्षाकृत तैनात div को क्षैतिज रूप से स्लाइड करने के लिए सबसे अच्छा अभ्यास/सर्वोत्तम प्रदर्शन क्या है। जब मैं एक बटन पर क्लिक करता हूं तो यह मेरे 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; 
} 

धन्यवाद

+0

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

उत्तर

10

संक्रमण के माध्यम से प्रदर्शन ज्यादा मोबाइल उपकरणों पर बेहतर अनुवाद कर!

संपादित करें: यहां एक लाइव डेमो हैं। translateX और translateY के साथ संक्रमण top, bottom, left और right से अधिक चिकनी हैं। jsFiddle Demo for mobile devices

+0

किसी भी परीक्षण या इस के लिए लेख? – JackMahoney

+0

मैं इस समय आईपैड के लिए एक वेबपैप बना रहा हूं। और translateX और translateY के साथ प्रदर्शन बाएं, दाएं, ऊपर और नीचे के साथ बहुत बेहतर है। लेकिन यदि आप इसे केवल डेस्कटॉप ब्राउज़र के लिए बनाते हैं तो आपको कोई फर्क नहीं पड़ता। और एक और अंतर है। यदि आप बाईं ओर एनिमेट करते हैं: 100% तत्व माता-पिता की चौड़ाई के 100% तक एनिमेटेड हो जाएगा। और यदि आप translateX (100%) को एनिमेट करते हैं तो तत्व को अपनी चौड़ाई के 100% तक एनिमेटेड किया जाएगा। इस समय मेरे पास कोई परीक्षण या लेख नहीं है - बस मेरा अनुभव;) लेकिन मैं आज एक जेएसफ़िल्ड तैयार करूंगा ... –

+0

यहां देखें। बाईं तरफ बाएं ओर होवर (या मोबाइल पर क्लिक करें)। अनुवाद आई संक्रमण मेरे आईपैड 3 पर बहुत आसान हैं। http://jsfiddle.net/philippkuehn/wLm87/ –