सीएसएस संक्रमण कई गुणों के साथ आशुलिपि?

Question

मैं कई गुणों के साथ CSS संक्रमण आशुलिपि के लिए सही वाक्यविन्यास खोजने के लिए प्रतीत नहीं कर सकता । यह कुछ नहीं करता है:

.element {
  -webkit-transition: height .5s, opacity .5s .5s;
     -moz-transition: height .5s, opacity .5s .5s;
      -ms-transition: height .5s, opacity .5s .5s;
          transition: height .5s, opacity .5s .5s;
  height: 0;
  opacity: 0;
  overflow: 0;
}
.element.show {
  height: 200px;
  opacity: 1;
}

मैं जावास्क्रिप्ट के साथ शो क्लास जोड़ता हूं। तत्व उच्च और दृश्यमान हो जाता है, यह सिर्फ संक्रमण नहीं करता है। नवीनतम क्रोम, एफएफ और सफारी में परीक्षण।

मैं क्या गलत कर रहा हूं?

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

Comments

इस दस्तावेज़ की जाँच करें। developer.mozilla.org/en/CSS/CSS_transitions

— websymphony

क्या आप वास्तव में ऊंचाई और अस्पष्टता के मूल्यों को बदलते हैं? अन्यथा वे नहीं बदलते हैं

— यंगज़ेन

मैं सीएसएस बदलाव के साथ नहीं भी अच्छी तरह से वाकिफ हूँ - डबल कर रहे हैं .5sमूल्यों के बाद opacityका इरादा?

— BoltClock

प्रलेखन कई गुणों के साथ शॉर्टहैंड संस्करण का उपयोग करने के लिए एक उदाहरण नहीं देता है। ऊँचाई 0 से 200px तक बदलती है, 0 से 1 तक अस्पष्टता। दूसरी .5s अपारदर्शिता संक्रमण पर देरी है। मुझे ऊंचाई में बढ़ने के लिए एक तत्व चाहिए, और जब वह खत्म हो जाए, तो उसे फीका कर दें।

— ग्रेगरी बोल्केनस्टीजन

आह हां, विलंब मूल्य।

— BoltClock

Answer 1

वाक्य - विन्यास:

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

ध्यान दें कि अवधि देरी से पहले आनी चाहिए, यदि उत्तरार्द्ध निर्दिष्ट है।

शॉर्टहैंड घोषणाओं में संयुक्त व्यक्तिगत बदलाव:

-webkit-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-moz-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-o-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;

या बस उन सभी को संक्रमण:

-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

यहाँ एक सीधा उदाहरण है । यहां देरी संपत्ति के साथ एक और है ।

---

संपादित करें: पहले यहां सूचीबद्ध थे और इसके बारे में ज्ञात समस्याएं थीं transition। पठनीयता के लिए हटाया गया।

निचला-रेखा: बस इसका उपयोग करें। इस संपत्ति की प्रकृति सभी अनुप्रयोगों के लिए गैर-ब्रेकिंग है और विश्व स्तर पर संगतता अब 94% से ऊपर है।

यदि आप अभी भी सुनिश्चित होना चाहते हैं, तो http://caniuse.com/css-transitions देखें

Comments

क्या आपने यह कोशिश की है? यह मेरे लिए काम नहीं करता है। मैं सभी संपत्ति का उपयोग नहीं कर सकता क्योंकि मेरे पास दूसरी संपत्ति में देरी है।

— ग्रेगोरी बोल्केनस्टिजन 16

क्या allविशिष्ट गुणों को सूचीबद्ध करने के बजाय उपयोग करने के लिए कोई प्रदर्शन / मेमोरी / अन्य निहितार्थ हैं? जैसे, अगर मैं संक्रमण backgroundऔर colorकेवल योजना बना रहा हूं - क्या मैं दोनों को निर्दिष्ट करने से बेहतर हूं, या बस उपयोग कर रहा हूं all? इसके अलावा - IE6-9 संक्रमणों का समर्थन नहीं करता है, और IE10 उन्हें उपसर्ग का समर्थन करता है - क्या ms-transition:निर्देशों को शामिल करने के लिए कोई उल्टा / नकारात्मक पक्ष है ?

— मैटस्ट्यूहलर

जब आप की जरूरत है बस के बजाय सभी गुणों को बदलने जब एक प्रदर्शन प्रभाव है। यदि आपके पास एक ही समय में सभी गुणों को संक्रमित करने वाले बहुत सारे तत्व हैं, तो यह गंभीर क्षति हो सकती है । के बारे में ms-transition, मुझे किसी भी कारण का पता नहीं है, अब जब IE10 बाहर है, तो कोई भी ms-transitionमानक के बजाय क्यों उपयोग करेगा transition। यह दोनों के लिए किसी भी परेशानी का कारण नहीं होगा, लेकिन यह विशेष रूप से एक संक्रमण-भारी स्टाइलशीट पर, आपके सीएसएस को फूला देगा। अधिक महत्वपूर्ण बात, फ़ाइल का आकार भी एक हिट ले जाएगा।

— रेमी ब्रेटन

मेरे पास एक ही मुद्दा था और यह दिखाई दिया कि "संक्रमण: अपारदर्शिता 1 एस .5 एस, अधिकतम ऊंचाई। 5 एस 0" का उपयोग करते समय "संक्रमण: अपारदर्शिता 1 एस। 5 एस, अधिकतम ऊंचाई। 5 एस 0 एस" का उपयोग नहीं किया गया था। पहली बार मुझे सीएसएस में शून्य मान के लिए एक इकाई की आवश्यकता है!

— मल्चर

यह इंगित करने योग्य है कि 'सभी' का उपयोग विशिष्ट गुणों को निर्दिष्ट करने की तुलना में धीमा है।

— नाथन

Answer 2

यदि आपके पास कई विशिष्ट गुण हैं, जिन्हें आप उसी तरह से बदलना चाहते हैं (क्योंकि आपके पास कुछ गुण भी हैं जिन्हें आप विशेष रूप से संक्रमण नहीं करना चाहते हैं, तो कहते हैं opacity), एक अन्य विकल्प कुछ ऐसा करना है (उपसर्गों को संक्षिप्तता के लिए छोड़ दिया गया है):

.myclass {
    transition: all 200ms ease;
    transition-property: box-shadow, height, width, background, font-size;
}

दूसरी घोषणा allइसके ऊपर शॉर्टहैंड घोषणा में ओवरराइड करती है और अधिक संक्षिप्त कोड के लिए (कभी-कभी) बनाती है।

/* prefixes omitted for brevity */
.box {
    height: 100px;
    width: 100px;
    background: red;
    box-shadow: red 0 0 5px 1px;
    transition: all 500ms ease;
    /*note: not transitioning width */
    transition-property: height, background, box-shadow;
}

.box:hover {
  height: 50px;
  width: 50px;
  box-shadow: blue 0 0 10px 3px;
  background: blue;
}

<p>Hover box for demo</p>
<div class="box"></div>

डेमो

Comments

यह उपयोगी है! न केवल transition-propertyओवरराइड के कारण, बल्कि इसलिए भी कि उदाहरण के transition-delayलिए शॉर्टहैंड (कम से कम वेबकिट में) के बाद निर्दिष्ट करने की आवश्यकता होती है। दूसरे शब्दों में आशुलिपि का तात्पर्य transition-delay0 से है और आशुलिपि में देरी होने से पहले एक स्टैंडअलोन विलंब को 0. 0 पर सेट करता है

— duncanwilcox

@duncanwilcox आप transition: [props] [duration] [easing] [delay] हर आधुनिक ब्राउज़र में कर सकते हैं

— जेसन

इस उत्तर को स्वीकृत उत्तर से अधिक पसंद करें।

— Erutan409

सुंदर! वास्तव में दृष्टिकोण की तरह!

— .dd_

Answer 3

मैं इसके साथ काम करता हूं:

element{
   transition : height 3s ease-out, width 5s ease-in;
}

Comments

यह वही है जो मैं देख रहा था - कई गुणों के लिए आशुलिपि। धन्यवाद!

— एडम मोइसा

Answer 4

अपारदर्शिता गुण को स्थानांतरित करने में .5 s विलंब होने से, तत्व पूरी तरह से पारदर्शी (और इस प्रकार अदृश्य) होगा कि पूरे समय इसकी ऊँचाई संक्रमण कर रही है। तो केवल एक चीज जिसे आप वास्तव में देखेंगे, वह है अस्पष्टता बदल रही है। इसलिए आपको संक्रमण से ऊँचाई की संपत्ति छोड़ने के समान प्रभाव मिलेगा:

"संक्रमण: अपारदर्शिता .5s। 5 s;"

क्या आप यही चाहते हैं? यदि नहीं, और आप ऊँचाई संक्रमण देखना चाहते हैं, तो आप पूरे समय के दौरान शून्य की अस्पष्टता नहीं रख सकते हैं जो इसे परिवर्तित कर रहा है।

Comments

यह या तो काम नहीं करता है, क्योंकि अपारदर्शिता के संक्रमण के दौरान ऊंचाई 0 रहेगी।

— Xesau

Answer 5

इसने मुझे समझने / सुव्यवस्थित करने में मदद की, केवल वही जो मुझे चेतन करने की आवश्यकता थी:

// SCSS - Multiple Animation: Properties | durations | etc.
// on hover, animate div (width/opacity) - from: {0px, 0} to: {100vw, 1}

.base {
  max-width: 0vw;
  opacity: 0;

  transition-property: max-width, opacity; // relative order
  transition-duration: 2s, 4s; // effects relatively ordered animation properties
  transition-delay: 6s; // effects delay of all animation properties
  animation-timing-function: ease;

  &:hover {
    max-width: 100vw;
    opacity: 1;

    transition-duration: 5s; // effects duration of all aniomation properties
    transition-delay: 2s, 7s; // effects relatively ordered animation properties
  }
}

~ यह '.base' वर्ग के भीतर सभी संक्रमण गुणों (अवधि, संक्रमण-समय-कार्य, आदि) के लिए लागू होता है

Answer 6

मुझे लगता है कि इसके साथ काम करें:

element{
   transition: all .3s;
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -o-transition: all .3s;