CSS transition shorthand z wieloma właściwościami?

Nie mogę znaleźć poprawnej składni przejścia 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;
}

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

Co robię źle?

EDIT: dla jasności, Szukam skróconej wersji, która zmniejszy mój CSS. Jest wystarczająco nadęty ze wszystkimi przedrostkami sprzedawcy. Również rozszerzono przykładowy kod.

Author: netpoetica, 2012-03-12
Source

6 answers

Składnia: 

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

Należy pamiętać, że czas trwania musi nastąpić przed opóźnieniem, jeśli jest ono określone.

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

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

Lub po prostu przełącz 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 prosty przykład. Oto kolejny z właściwością delay .

Edit: poprzednio wymienione tutaj były kompatybilności i Znane problemy dotyczące transition. Usunięto za czytelność.

Podsumowując: po prostu go użyj. Charakter tej właściwości jest Nietłukący dla wszystkich aplikacji i kompatybilność jest teraz znacznie powyżej 94% na całym świecie.

Jeśli nadal chcesz mieć pewność, zapoznaj się z http://caniuse.com/css-transitions

 566
Author: Rémi Breton,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-27 17:56:23

Jeśli masz kilka specyficznych właściwości, które chcesz przenieść w ten sam sposób (ponieważ masz również pewne właściwości, które konkretnie nie chcesz przejść, powiedzmy opacity), inną opcją jest wykonanie czegoś takiego (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 deklaracji skróconej nad nią i tworzy (czasami) bardziej zwięzły kod.

Demo

 301
Author: Jason,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-14 22:09:18

Pracuję z tym: 

element{
   transition : height 3s ease-out, width 5s ease-in;
}
 3
Author: AhbapAldirmaz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-19 11:45:04

MającOpóźnienie 5s przy przechodzeniu właściwość krycie powoduje, że element będzie całkowicie przezroczysty (a więc niewidoczny) przez cały czas przejścia jego wysokości. Więc jedyną rzeczą, którą zobaczysz, jest zmiana krycia. Tak więc uzyskasz taki sam efekt jak pozostawienie właściwości height poza przejściem:

"Przejście: nieprzezroczystość .5s .5s; "

Tego właśnie chcesz? Jeśli nie, a chcesz zobaczyć przejście wysokości, nie możesz mieć nieprzezroczystości zero przez cały czas przejścia.

 2
Author: J.B.,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-03 22:13:36

Przejścia CSS są kontrolowane za pomocą właściwości shorthand transition. Jest to najlepszy sposób na konfigurację przejść, ponieważ ułatwia to unikanie synchronizacji długości listy parametrów, co może być bardzo frustrujące, gdy trzeba spędzać dużo czasu na debugowaniu CSS.

Możesz kontrolować poszczególne składniki przejścia za pomocą następujących pod-właściwości:

  1. transition-property
  2. transition-duration
  3. transition-timing-function
  4. transition-delay

skrótowa składnia CSS jest zapisywana w następujący sposób:

div { transition: <property> <duration> <timing-function> <delay>; }

Uwaga: Transition-delay jest jednak właściwością opcjonalną.

 0
Author: Tahir77667,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-20 18:44:55

Myślę, że praca z tym: 

element{
   transition: all .3s;
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -o-transition: all .3s;
 -3
Author: Thomas Lamothe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-05 16:28:27