विरासत में मिली CSS3 संक्रमणों को अक्षम / बंद करें

Question

इसलिए मेरे पास एक तत्व से निम्नलिखित सीएसएस संक्रमण हैं:

a { 
     -webkit-transition:color 0.1s ease-in, background-color 0.1s ease-in ;  
     -moz-transition:color 0.1s ease-in, background-color 0.1s ease-in;  
     -o-transition:color 0.1s ease-in, background-color 0.1s ease-in;  
     transition:color 0.1s ease-in, background-color 0.1s ease-in; 
}

क्या विशिष्ट तत्वों पर इन विरासत वाले संक्रमणों को अक्षम करने का एक तरीका है?

a.tags { transition: none; } 

लगता है काम नहीं कर रहा है।

Answer 1

transition: noneनिम्नलिखित HTML दिए गए प्रतीत होने का उपयोग (ओपेरा के लिए एक विशिष्ट समायोजन के साथ) समर्थित है:

<a href="#" class="transition">Content</a>
<a href="#" class="transition">Content</a>
<a href="#" class="noTransition">Content</a>
<a href="#" class="transition">Content</a>

... और सीएसएस:

a {
    color: #f90;
    -webkit-transition:color 0.8s ease-in, background-color 0.1s ease-in ;  
    -moz-transition:color 0.8s ease-in, background-color 0.1s ease-in;  
    -o-transition:color 0.8s ease-in, background-color 0.1s ease-in;  
    transition:color 0.8s ease-in, background-color 0.1s ease-in; 
}
a:hover {
    color: #f00;
    -webkit-transition:color 0.8s ease-in, background-color 0.1s ease-in ;  
    -moz-transition:color 0.8s ease-in, background-color 0.1s ease-in;  
    -o-transition:color 0.8s ease-in, background-color 0.1s ease-in;  
    transition:color 0.8s ease-in, background-color 0.1s ease-in; 
}
a.noTransition {
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: color 0 ease-in;
    transition: none;
}

जेएस फिडेल डेमो ।

Ubuntu 11.04 पर क्रोमियम 12, ओपेरा 11.x और फ़ायरफ़ॉक्स 5 के साथ परीक्षण किया गया।

ओपेरा के लिए विशिष्ट अनुकूलन है, -o-transition: color 0 ease-in;जिसका उपयोग उसी गुण को लक्षित करता है जैसा कि अन्य transitionनियमों में निर्दिष्ट है, लेकिन संक्रमण का समय निर्धारित करता है 0, जो संक्रमण को प्रभावी रूप से ध्यान देने योग्य होने से रोकता है। a.noTransitionचयनकर्ता का उपयोग संक्रमण के बिना तत्वों के लिए एक विशिष्ट चयनकर्ता प्रदान करने के लिए है।

---

यह नोट करने के लिए संपादित कि @ Frédéric Hamidi का जवाब , all(ओपेरा के लिए, कम से कम) का उपयोग करके प्रत्येक व्यक्तिगत संपत्ति-नाम को सूचीबद्ध करने की तुलना में कहीं अधिक संक्षिप्त है जिसे आप संक्रमण नहीं करना चाहते हैं।

जेएस फिडेल डेमो अपडेट किया गया, allजो ओपेरा का उपयोग दिखा रहा है : -o-transition: all 0 none@ Frédéric के उत्तर के स्व-विलोपन के बाद ।

Comments

आह, मुझे संक्रमण से पहले ब्राउज़र विशिष्ट टैग जोड़ने की आवश्यकता थी। दुष्ट, जयकार!

— स्कूटी

ओपेरा के लिए धन्यवाद कोई संक्रमण जानकारी।

— पडरो_लैंड

ओपेरा वास्तव में इस अंतर से उबाऊ है

— जूनियर मेहे सेप

क्यों आप ऐसा कुछ नहीं कर सकते: संक्रमण: रंग कोई नहीं, पृष्ठभूमि-रंग 0.1s आसानी-में;

Answer 2

यदि आप एकल संक्रमण संपत्ति को निष्क्रिय करना चाहते हैं, तो आप कर सकते हैं:

transition: color 0s;

(चूंकि एक शून्य दूसरा संक्रमण बिना किसी संक्रमण के समान है।)

Comments

एक प्रदर्शन स्टिकर अपराध कर सकता है, लेकिन यह एकल संपत्ति को अक्षम करने के लिए वैध लगता है।

— डबलजॉश

यह अब क्रोम में मेरे लिए काम नहीं करता है। यह सिर्फ विरासत में मिले सभी बदलावों को निष्क्रिय करता है।

— उलटा

क्या आप एक उदाहरण दे सकते हैं @Inversion

— विल मैडेन

@WillMadden, यहाँ jsfiddle.net/312bu8po प्रारंभिक अवस्था का प्रयास करते हैं और फिर css में तैयार लाइन को अनकंफर्ट करते हैं - जिसके लिए संक्रमण leftहटा दिया जाएगा।

— उलटा

Answer 3

सभी संक्रमणों को हटाने का दूसरा तरीका unsetकीवर्ड के साथ है :

a.tags {
    transition: unset;
}

के मामले में transition, unsetके बराबर है initial, क्योंकि transitionविरासत में मिली संपत्ति नहीं है:

a.tags {
    transition: initial;
}

एक पाठक जो इसके बारे में जानता है unsetऔर initialयह बता सकता है कि इन समाधानों को तुरंत ठीक किया गया है, बिना किसी विशिष्ट वाक्यविन्यास के बारे में सोचने के लिए transition।

Comments

— परेशान

caniuse.com/#feat=css-unset-value - यदि आपको IE11 समर्थन की आवश्यकता है, तो मैं शायद प्रारंभिक के साथ जाऊंगा।

— निक मिडवेक

Answer 4

आप किसी तत्व के अंदर सभी संक्रमणों का भी निर्वहन कर सकते हैं:

सीएसएस:

.noTrans *{
-moz-transition: none;
-webkit-transition: none;
-o-transition: color 0 ease-in;
transition: none;
}

HTML:

<a href="#">Content</a>
<a href="#">Content</a>
<div class="noTrans">
<a href="#">Content</a>
</div>
<a href="#">Content</a>

Comments

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

— स्कूटी

यह मेरे लिए हाल ही में एक Google मानचित्र तत्व से विश्व स्तर पर संक्रमण को हटाने के लिए एक बहुत ही उपयोगी समाधान था, जो मानचित्र व्यवहार में अजीबता को जोड़ रहा था।

— फ्रीवेयर्ड

Answer 5

W3schools के आधार पर डिफ़ॉल्ट संक्रमण मूल्य है:, all 0s ease 0sजो संक्रमण को अक्षम करने का क्रॉस-ब्राउज़र संगत तरीका होना चाहिए।

यहां एक लिंक दिया गया है: https://www.w3schools.com/cssref/css3_pr_transition.asp