Skrót przejściowy CSS z wieloma właściwościami?

Question

Nie mogę znaleźć poprawnej składni dla przejścia CSS stenografia z wieloma właściwościami. To nic nie robi:

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

dodać klasę show z javascript. Element staje się wyższy i widoczny, po prostu nie przechodzi. Testowanie w najnowszych przeglądarkach Chrome, FF i Safari.

Co robię źle?

EDYCJA: Dla jasności, szukam skróconej wersji, aby skalować mój CSS. Jest wystarczająco spuchnięty ze wszystkimi przedrostkami dostawcy. Rozszerzyłem również przykładowy kod.

Answer 1

Składnia:

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

Należy pamiętać, że czas trwania musi przyjść przed zwłoki, jeśli jest on określony.

Poszczególne przejścia połączone w skróconych deklaracji:

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

Albo po prostu przejściowym je wszystkie:

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

Oto a straightforward example. Oto kolejny: with the delay property.

---

Edit: wcześniej wymienione tutaj były Kompatybilność i znane problemy dotyczące transition. Usunięto dla czytelności.

Dolna linia: po prostu z niego skorzystaj. Charakter tej właściwości nie jest łamany dla wszystkich aplikacji, a zgodność z nią jest teraz znacznie wyższa niż 94% na całym świecie.

Jeśli nadal chcesz mieć pewność, patrz http://caniuse.com/css-transitions

Answer 2

Jeśli masz kilka specyficznych właściwości, które mają do przejścia w ten sam sposób (bo też mają pewne właściwości, które specyficznie nie chcą przejściowego, np opacity), innym rozwiązaniem jest coś podobnego (prefiksy pominięte dla zwięzłości):

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

druga deklaracja nadpisuje all w skrótowym zgłoszenia nad nim i sprawia, że ​​(c) więcej czasami dokładny kod.

Demo

Answer 3

przez posiadanie .5s opóźnienie przechodzenia właściwości nieprzezroczystości, element będzie całkowicie przezroczysty (i w ten sposób niewidoczny) przez cały czas jego wysokość przejście. Więc jedyną rzeczą, którą zobaczysz, jest zmiana nieprzezroczystości. Więc otrzymasz taki sam efekt, jak opuszczenie właściwości wysokości poza przejściem:

"przejście: krycie .5s .5s;"

Czy tego chcesz? Jeśli nie, a chcesz zobaczyć zmianę wysokości, nie możesz mieć wartości krycia równej zero podczas całego okresu jej przenoszenia.

Answer 4

Myślę, że praca z tym:

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