कई गुणों के साथ सीएसएस संक्रमण शॉर्टेंड?

Question

मुझे कई गुणों के साथ सीएसएस संक्रमण शॉर्टेंड के लिए सही वाक्यविन्यास नहीं मिल रहा है। यह कुछ भी नहीं करता है:

.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; 
} 

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

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

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

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; 

यहाँ a straightforward example है। यहां एक और with the delay property है।

---

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

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

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

Answer 2

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

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

दूसरी घोषणा यह ऊपर आशुलिपि घोषणा में all ओवरराइड करता है और (कभी कभी) अधिक ग के लिए बनाता है ऑनिस कोड

Demo

Answer 3

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

"संक्रमण: अस्पष्टता .5s .5s;"

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

Answer 4

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

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