CSS3 संक्रमण: क्या "संक्रमण: सब" धीमा "संक्रमण: एक्स" से धीमा है?

Question

मुझे सीएसएस 3 संक्रमण संपत्ति के लिए गति प्रदान करने के बारे में एक सवाल है।

मान लीजिए मैं तत्वों की एक संख्या है:

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} 

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

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

Answer 1

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

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

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

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

Answer 2

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

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

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