2012-09-21 22 views
8

में एकाधिक संक्रमण-संपत्ति को परिभाषित करें transition-propertyall पर सेट करते समय, ब्राउज़र विंडो के अंदर ज़ूम करते समय यह बुरा लगता है, क्योंकि width और height गुणों को भी परिवर्तित किया जा रहा है। जब मैं केवल background और color चाहते हैं, मैं, यह बहु लाइन परिभाषित करने की जरूरत है, हालांकि:सीएसएस

transition-property: color, background; 
transition-duration: 250ms; 

यह बुरा है, क्योंकि मैं भी -webkit-, -moz और -o- के लिए यह करना है। इसके बजाय मैं इस तरह कुछ ढूंढ रहा हूं:

transition: [color and background] 250ms; 

क्या इसके लिए कोई वाक्यविन्यास है?

उत्तर

15

कई संक्रमणों के साथ transition आशुलिपि का उपयोग करते समय, आप अल्पविराम के साथ प्रत्येक प्रॉपर्टी के लिए संक्रमण अवधि को दोहराने के लिए, और अलग मूल्यों के प्रत्येक समूह की जरूरत है:

transition: color 250ms, background 250ms; 
उपसर्गों के साथ

, यह इस तरह दिखता है:

-moz-transition: color 250ms, background 250ms; 
-o-transition: color 250ms, background 250ms; 
-webkit-transition: color 250ms, background 250ms; 
transition: color 250ms, background 250ms; 

अभी भी थोड़ा दोहराया गया है, लेकिन कम से कम यह सभी उपसर्गों के लिए transition-property और transition-duration दोहराता है।

शॉर्टंड सिंटैक्स का वर्णन spec में किया गया है।

+0

सरल :) यह मुझे प्रत्येक संपत्ति के लिए अलग-अलग अवधि का उपयोग करने का विकल्प भी देता है। – bytecode77