CSS3 संक्रमण प्रदर्शन के लिए विचार

Question

मोबाइल डिवाइस का समर्थन करने के लिए आवश्यक एक परियोजना के हिस्से के रूप में, मैं CSS3 का उपयोग करके आईफोन टॉगल नियंत्रण की नकल करने पर काम कर रहा हूं। मेरे पास तत्व का बहुत अधिक रूप और अनुभव है, और इसके राज्य परिवर्तन को एनिमेट करने के लिए CSS3 संक्रमण का उपयोग कर रहा हूं।

जब मेरे पास कोई अन्य पृष्ठ वाला तत्व स्वयं नहीं है, तो संक्रमण आईओएस पर अपेक्षाकृत चिकनी है। हालांकि, जब मैं इसे किसी पृष्ठ पर अन्य सीएसएस तत्वों के साथ जोड़ता हूं, तो आईओएस में नतीजा कुछ भी है। यह एक कच्चे jQuery एनीमेशन से थोड़ा बेहतर है, लेकिन ज्यादा नहीं।

मैं प्रदर्शित करने के लिए मैं क्या मतलब दो परीक्षण पृष्ठों को सेट कर लेने (अंतर एक नियमित ब्राउज़र में शायद ही ध्यान देने योग्य है):

टॉगल अपने स्वयं>http://ben-major.co.uk/labs/iPhone%20UI/ios_toggle.html

अन्य तत्वों के साथ संयुक्त>http://ben-major.co.uk/labs/iPhone%20UI/ पर नियंत्रण

मैं मोबाइल उपकरणों में संक्रमण को तेज करने के लिए कोई सलाह ढूंढ रहा हूं। पूर्ण पृष्ठ परीक्षण पर इसके प्रदर्शन को धीमा कर रहे कारक क्या हो सकते हैं?

कोई सलाह और टिप्पणियां आपका स्वागत है।

-webkit-transform-style: preserve-3d; 

तत्व करने के लिए आप के लिए, गति बढ़ा सकता है संक्रमण लागू कर रहे हैं:

Answer 1

आप इस के साथ सावधान रहना करने के लिए के रूप में यह तत्व यह पर लागू की गई की z- सूचकांक को बदल सकते हैं, लेकिन जोड़ने है एनीमेशन काफी मजबूत है, क्योंकि यह हार्डवेयर को एनीमेशन के लिए हार्डवेयर त्वरण का उपयोग करने के लिए मजबूर करता है।

आप लेआउट कीड़े का सामना करते हैं, तो आप बस अपने 2 डी बदलाव 3 डी मूल्यों के लिए स्विच कर सकते हैं, तो:

-webkit-transform: translate(100px, 100px) 

हो जाता है:

-webkit-transform: translate3d(100px, 100px, 0px) 

आप यह कैसे गति में मदद करता है के एक डेमो देख सकते हैं चीजें ऊपर, http://stickmanventures.com/labs/demo/spinning-gears-Chrome-preserve-3d/#

यदि तत्व को लागू करने के बाद, आप इसे देखते हैं या इसके आसपास के तत्व उपयोग पर झपकी देते हैं, तो उपयोग करें:

-webkit-backface-visibility: hidden; 

तत्व के लिए, और इससे समस्या को ठीक करना चाहिए।

इन युक्तियों ने मुझे तेजी से, कुशल सीएसएस संक्रमणों का उत्पादन करने में मदद की है, उम्मीद है कि वे मदद करेंगे। :)

Answer 2

क्रोम ने हाल ही में 2 डी संक्रमण प्रदर्शन में सुधार किया है, और अब इस चाल की अब आवश्यकता नहीं है। सबसे अच्छी बात यह है कि यदि अनुवाद 3 डी हटा दिया गया है तो आपके पास अब उन जेड-इंडेक्स समस्याएं नहीं होंगी! साबित करने के लिए परीक्षण का प्रयोग करें। http://stickmanventures.com/labs/demo/spinning-gears-Chrome-preserve-3d/

Answer 3

मुझे लगता है कि यह काफी पुराना पहले से ही लेकिन किसी को भी, जो अभी भी चाल की जरूरत मोबाइल डिवाइस पर संक्रमण प्रदर्शन में सुधार करने के लिए, आप आवेदन कर सकते हैं: -webkit-परिणत: translateZ (0); उस तत्व के लिए जो आप एनिमेट कर रहे हैं। यह चाल इस ब्लॉग के अनुसार है: http://chrissilich.com/blog/fix-css-animation-slow-or-choppy-in-mobile-browsers/। मैंने कोशिश की है और यह काफी अच्छी तरह से काम करता है।

Answer 4

भी आप will-change: transform; इसके बारे में अधिक यहाँ कोशिश कर सकते हैं, पढ़ते हैं: https://developer.mozilla.org/en-US/docs/Web/CSS/will-change#Browser_compatibility