एक तत्व पर कई सीएसएस संक्रमण कैसे करें?

Question

यह एक बहुत सीधा सवाल है, लेकिन मैं सीएसएस संक्रमण गुणों पर बहुत अच्छा प्रलेखन नहीं पा सकता हूं। यहाँ सीएसएस स्निपेट है:

    .nav a
{
    text-transform:uppercase;
    text-decoration:none;
    color:#d3d3d3;
    line-height:1.5 em;
    font-size:.8em;
    display:block;
    text-align:center;
    text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15);
    -webkit-transition: color .2s linear;
    -moz-transition: color .2s linear;
    -o-transition: color .2s linear;
    transition: color .2s linear;
    -webkit-transition: text-shadow .2s linear;
    -moz-transition: text-shadow .2s linear;
    -o-transition: text-shadow .2s linear;
    transition: text-shadow .2s linear;
}

.nav a:hover
{
    color:#F7931E;
    text-shadow: 0 1.5em 0 rgba(247, 147, 30, 0.15);
}

जैसा कि आप देख सकते हैं, संक्रमण गुण प्रत्येक अधिलेखित कर रहे हैं। जैसा कि यह खड़ा है, पाठ-छाया चेतन होगा, लेकिन रंग नहीं। मैं उन दोनों को एक साथ कैसे चेतन करूं? किसी भी उत्तर के लिए धन्यवाद।

Comments

न भूलें कि transition: allसफारी / आईपैड के लिए बहुत छोटी गाड़ी है: joelglovier.com/writing/…

— Oğuzhan Kahyaoğlu

Answer 1

संक्रमण गुणों का अल्पविराम सभी ब्राउज़रों में सीमांकित होता है जो संक्रमण का समर्थन करते हैं:

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

easeडिफ़ॉल्ट टाइमिंग फ़ंक्शन है, इसलिए आपको इसे निर्दिष्ट करने की आवश्यकता नहीं है। यदि आप वास्तव में चाहते हैं linear, तो आपको इसे निर्दिष्ट करने की आवश्यकता होगी:

transition: color .2s linear, text-shadow .2s linear;

इससे पुनरावृत्ति होने लगती है, इसलिए यदि आप एक ही समय और कई कार्यों में समय के कार्यों का उपयोग करने जा रहे हैं, तो आगे बढ़ना और transition-*आशुलिपि के बजाय विभिन्न गुणों का उपयोग करना सबसे अच्छा है :

transition-property: color, text-shadow;
transition-duration: .2s;
transition-timing-function: linear;

Comments

मुझे लगता है क्योंकि परिवर्तन एक श्रृंखला है जहां ऑर्डर मायने रखता है, इसलिए यदि आप कार्यात्मक जंजीरों के लिए उपयोग किए जाते हैं तो वाक्यविन्यास अच्छा लगता है, जबकि संक्रमण के लिए पूरी तरह से स्वतंत्र तत्वों की एक अनियंत्रित सूची की आवश्यकता होती है, इसलिए कॉमा उपयुक्त हैं

— मारीचन

CSS में बदलाव के बारे में एक सामान्य टिप्पणी के रूप में, एक को ध्यान में रखना चाहिए कि एक के बाद एक कई संक्रमण परिभाषाएं होने से काम नहीं चलेगा, और इसे पूरा करने के लिए, ये एक ही परिभाषा में होना चाहिए (जैसे एसए में यहां)। CSS के बुनियादी नियमों के अनुसार, "नवीनतम" नियम लागू होता है, इसलिए यदि अलग-अलग लाइनों में कई परिभाषाएं हैं, तो केवल अंतिम परिभाषा लागू की जाएगी। FYI करें

— TheCuBeMan

Answer 2

तुम भी बस के साथ काफी कर सकते हैं:

.nav a {
    -webkit-transition: all .2s;
}

Comments

आप वास्तव में 'सभी' को हटा सकते हैं क्योंकि यह डिफ़ॉल्ट है जब तक कि अन्यथा निर्दिष्ट न हो।

— जोशना सेप

एक उत्कृष्ट बिंदु के लिए +1, लेकिन मुझे लगता है कि इसे वहां रखना उपयोगी है, विशेष रूप से टीमों के बीच स्थिरता और समझ के लिए।

— एक्सएमएल

इससे सावधान! यदि मोबाइलों के लिए विकसित किया जा रहा है, हार्डवेयर त्वरित तत्वों के संयोजन में, नए उपकरणों को अस्पष्ट और पुराने उपकरणों को अनुपयोगी बनाता है।

— इल्या कर्णखोव

धन्यवाद, @ Caner ,ahin क्या आप हमें कोई दस्तावेज या बेंचमार्किंग टूल दे सकते हैं जो लोगों को इस बिंदु को समझने में मदद करेगा? इसके अलावा, क्या आप ऐसे प्रमाण देखते हैं जो 'नो' को दिखाता है जो किसी भी स्पेसियर का उपयोग करने से बदतर है?

— XML

@XML जिस तरह से समझाया गया था उसके दो नकारात्मक प्रभाव हैं। 1, ब्राउज़र 'सभी' के उपयोग के कारण अतिरिक्त संसाधन जोड़ता है। ब्राउज़र उस तत्व को बारीकी से सुनेगा जो किसी भी परिवर्तन की प्रतीक्षा कर रहा है जो कम प्रदर्शन कर रहे हैं और पेज जंक बना सकते हैं। 2, अप्रत्याशित प्रभाव पैदा कर सकता है यदि कोई डेवलपर बाद में एक पृष्ठभूमि रंग में डालता है जो तब संक्रमण हो जाएगा जो अपेक्षित या आवश्यक नहीं हो सकता है।

— स्टीफन बर्ट

Answer 3

निम्नलिखित की तरह कुछ एक साथ कई बदलावों की अनुमति देगा:

-webkit-transition: color .2s linear, text-shadow .2s linear;
   -moz-transition: color .2s linear, text-shadow .2s linear;
     -o-transition: color .2s linear, text-shadow .2s linear;
        transition: color .2s linear, text-shadow .2s linear;

उदाहरण: http://jsbin.com/omogaf/2

Answer 4

यदि आप सभी गुणों को समान बनाते हैं, तो आप प्रत्येक को अलग से सेट कर सकते हैं, जो आपको कोड को दोहराने की अनुमति नहीं देगा।

 transition: all 2s;
 transition-property: color, text-shadow;

यहाँ इसके बारे में अधिक है: सीएसएस संक्रमण कई गुणों के साथ आशुलिपि?

जब तक आप अवांछित व्यवहार और अनपेक्षित प्रदर्शन हिट के साथ समाप्त हो सकते हैं, मैं संपत्ति सभी (संक्रमण-संपत्ति ओवरराइट्स 'सभी) का उपयोग करने से बचूंगा।

Answer 5

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

Answer 6

यहां दो गुणों को एक साथ बदलने के लिए LESS मिक्सिन दिया गया है:

.transition-two(@transition1, @transition1-duration, @transition2, @transition2-duration) {
 -webkit-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
    -moz-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
      -o-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
          transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
}

Comments

autoprefixer भी अच्छा है!

— फिर से लिखा

ऑटोप्रिफ़िशर + स्टाइलस FTW।

— जेसन लिडॉन

Answer 7

अवधि, विलंब और समयावधि फ़ंक्शन के लिए विभिन्न मानों के साथ कई संक्रमण सेट करना संभव है। विभिन्न संक्रमणों को विभाजित करने के लिए उपयोग करें,

button{
  transition: background 1s ease-in-out 2s, width 2s linear;
  -webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */
}

संदर्भ: https://kolosek.com/css-transition/

Answer 8

संपत्तियों को पूरी तरह से निर्दिष्ट करने से बचना भी संभव है।

#box {
  transition: 0.4s;
  position: absolute;
  border: 1px solid darkred;
  bottom: 20px; left: 20px;
  width: 200px; height: 200px;
  opacity: 0;
}

#box.on {
  opacity: 1;
  height: 300px;
  width: 500px;
 }