CSS3 संक्रमण: "संक्रमण: सभी" धीमी से "संक्रमण: x" है?

Question

मेरे पास css3 संक्रमण संपत्ति के लिए गति प्रदान करने के बारे में एक प्रश्न है।

मान लीजिए कि मेरे पास कई तत्व हैं:

div, span, a {transition: all}

div {margin: 2px}
span {opacity: .5}
a:hover {background-position: left top}

div:hover {margin: -100px}
span:hover {opacity: 1}
a:hover {background-position: -5px top}

एक घोषणा के उपयोग से उन सभी तत्वों के सभी संक्रमणों को लक्षित करना बहुत अधिक कुशल है div, span, a {transition: all}। लेकिन मेरा सवाल यह है: क्या प्रत्येक तत्व की विशिष्ट संक्रमण संपत्ति को लक्षित करने के लिए एनीमेशन रेंडरिंग की चिकनाई और तेजता के संदर्भ में यह "तेज" होगा? उदाहरण के लिए:

div {margin: 2px; transition: margin .2s ease-in}
span {opacity: .5; transition: opacity .2s ease-in}
a {background-position: left top; transition: background .2s ease-in}

div:hover {margin: -100px}
span:hover {opacity: 1}
a:hover {background-position: -5px top}

यह पूछने में मेरा तर्क यह है कि अगर सीएसएस "इंजन" को "सभी" संक्रमण गुणों की खोज करनी है, भले ही किसी तत्व के लिए सिर्फ एक ही संपत्ति हो, कि वह चीजों को धीमा कर दे।

किसी को पता है कि अगर यह मामला है? धन्यवाद!

Comments

यह हमेशा मेरा सिद्धांत रहा है, लेकिन मैंने कभी भी अभ्यास में कोई अंतर नहीं देखा है।

— सोच रहा था कि

मुझे उम्मीद है कि वास्तव में एनीमेशन को स्क्रीन पर प्रदर्शन करना सीएसएस को पार्स करने की तुलना में बहुत अधिक महंगा होगा। जब तक आप सिस्टम का दुरुपयोग नहीं कर रहे हैं, मैं इसके बारे में बहुत ज्यादा चिंता नहीं करूंगा।

— स्टाइल्सक्रिस

मुझे लगता है कि अगर कोई अंतर है तो यह मिलीसेकंड में होगा - लेकिन मैं जानना चाहता हूं कि क्या एक मिनट का भी अंतर है। आपकी टिप्पणियों के लिए thx

— HandiworkNYC.com

यह चिल्लाती "विक्रेता विशिष्ट कार्यान्वयन विस्तार" मेरे लिए ...

— BoltClock

Answer 1

हां, उपयोग करने transition: allसे प्रदर्शन में बड़ी कमियां हो सकती हैं। ऐसे बहुत से मामले हो सकते हैं जहां ब्राउज़र को यह देखना होगा कि क्या उसे कोई बदलाव करने की आवश्यकता है, भले ही उपयोगकर्ता उसे नहीं देखेगा, जैसे कि रंग बदलता है, आयाम बदलता है आदि।

सबसे सरल उदाहरण जो मैं सोच सकता हूं, वह यह है: http://dabblet.com/gist/1657661 - ज़ूम स्तर या फ़ॉन्ट के आकार को बदलने का प्रयास करें और आप देखेंगे कि सब कुछ एनिमेटेड हो गया है। बेशक यह एक उदाहरण नहीं हो सकता है इस तरह के बहुत से उपयोगकर्ता इंटरैक्शन, लेकिन कुछ इंटरफ़ेस परिवर्तन हो सकते हैं जो कुछ ब्लॉकों में रिफ्लो और repaints का कारण बन सकते हैं, जो ब्राउज़र को उन परिवर्तनों को आज़माने और चेतन करने के लिए कह सकते हैं।

तो, सामान्य तौर पर, यह अनुशंसा की जाती है कि आप इसका उपयोग नहीं करेंगे transition: allऔर इसके बजाय सीधे संक्रमण का उपयोग करेंगे।

कुछ अन्य चीजें हैं जो allसंक्रमण के साथ गलत हो सकती हैं , जैसे पेज लोड पर एनीमेशन के छींटे, जहां यह पहले ब्लॉक के लिए प्रारंभिक शैलियों को प्रस्तुत करेगा और फिर एनीमेशन के साथ शैली को लागू करेगा। बहुत सारे मामलों में यह वह चीज नहीं होगी जो आप चाहते हैं :)

Comments

लिंक मर चुका है, आपका उदाहरण देखना पसंद करेंगे

— MMachinegun

पूरे डब्बल का लिंक तय किया

— kizu

मैं उदाहरण भी देखना चाहूंगा। शायद यह अब मौजूद नहीं है?

— दारज़ाह

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

— ओवेन मासबैक

Answer 2

मैं उन allमामलों के लिए उपयोग कर रहा हूं जहां मुझे एक से अधिक नियमों को चेतन करने की आवश्यकता थी। उदाहरण के लिए, बदलने के लिए अगर मैं चाहता था colorऔर background-colorपर :hover।

लेकिन यह पता चला है कि आप संक्रमणों के लिए एक से अधिक नियमों को लक्षित कर सकते हैं, इसलिए आपको सेटिंग का सहारा लेने की आवश्यकता नहीं हैall ।

.nav a {
  transition: color .2s, text-shadow .2s;
}