Stenografia della transizione CSS con proprietà multiple?

Question

Non riesco a trovare la sintassi corretta per la transizione CSS stenografia con più proprietà. Questo non fa nulla:

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

aggiungo la classe spettacolo con javascript. L'elemento diventa più alto e visibile, semplicemente non transita. Testare nelle ultime versioni di Chrome, FF e Safari.

Cosa sto sbagliando?

EDIT: Solo per essere chiari, sto cercando la versione abbreviata per ridimensionare il mio CSS. È abbastanza gonfio con tutti i prefissi del venditore. Anche espanso il codice di esempio.

Answer 1

Sintassi:

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

Si noti che la durata deve venire prima il ritardo, se quest'ultimo è specificato.

transizioni individuali combinati nelle dichiarazioni di stenografia:

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

O semplicemente tutti TRANSIZIONE:

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

Ecco a straightforward example. Eccone un altro with the delay property.

---

Edit: precedentemente elencate qui erano le compatibilità e problemi noti riguardanti transition. Rimosso per la leggibilità.

Bottom-line: basta usarlo. La natura di questa proprietà è irrinunciabile per tutte le applicazioni e la compatibilità è ora ben al di sopra del 94% a livello globale.

Se si vuole ancora essere sicuri, fare riferimento a http://caniuse.com/css-transitions

Answer 2

Se si dispone di diverse proprietà specifiche che si desidera per la transizione nello stesso modo (perché avete anche alcune proprietà che specificamente non vuole transizione, dire opacity), un'altra opzione è quella di fare qualcosa di simile (prefissi omessa per brevità):

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

la seconda dichiarazione sostituisce il all nella dichiarazione stenografia sopra di esso e rende (occasionalmente) più c codice oncise.

Demo

Answer 3

Avendo il ritardo .5s sulla transizione proprietà di opacità, l'elemento sarà completamente trasparente (e quindi invisibile) per tutto il tempo la sua altezza è la transizione. Quindi l'unica cosa che vedrai sarà cambiare l'opacità. Quindi otterrai lo stesso effetto di lasciare la proprietà height fuori dalla transizione:

"transizione: opacità .5s .5s;"

E 'quello che vuoi? In caso contrario, e si desidera vedere la transizione in altezza, non è possibile avere un'opacità pari a zero durante tutto il tempo in cui viene eseguita la transizione.

Answer 4

Penso che il lavoro con questo:

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