Nie mogę znaleźć poprawnej składni dla stenografii przejścia CSS 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 za pomocą javascript. Element staje się wyższy i widoczny, po prostu się nie zmienia. Testowanie w najnowszych przeglądarkach Chrome, FF i Safari.
Co ja robię źle?
EDYCJA: Żeby było jasne, szukam wersji skróconej, aby zmniejszyć mój CSS. Jest wystarczająco napompowany wszystkimi prefiksami dostawcy. Rozszerzono również przykładowy kod.
css
webkit
css-transitions
shorthand
Gregory Bolkenstijn
źródło
źródło
.5s
wartości sąopacity
zamierzone?Odpowiedzi:
Składnia:
Pamiętaj, że czas trwania musi być wcześniejszy niż opóźnienie, jeśli jest ono określone.
Poszczególne przejścia połączone w deklaracje skrócone:
Lub po prostu przenieś je wszystkie:
Oto prosty przykład . Oto kolejna z właściwością delay .
Edycja: poprzednio wymienione tutaj były kompatybilności i znane problemy dotyczące
transition
. Usunięto dla czytelności.Podsumowując: po prostu go użyj. Charakter tej właściwości jest niezniszczalny dla wszystkich aplikacji, a kompatybilność jest obecnie znacznie wyższa niż 94% na całym świecie.
Jeśli nadal chcesz być pewien, zajrzyj na http://caniuse.com/css-transitions
źródło
all
zamiast używania konkretnych właściwości? Na przykład, jeśli planuję przejśćbackground
icolor
tylko - czy lepiej jest podać oba, czy tylko używaćall
? Ponadto - biorąc pod uwagę, że IE6-9 nie obsługuje przejść, a IE10 obsługuje je bez prefiksu - czy jest jakieś plusy / minusy dołączaniams-transition:
dyrektyw?ms-transition
, nie znam żadnego powodu, skoro IE10 jest obecnie dostępny, dlaczego ktoś nadal używałbyms-transition
zamiast standardutransition
. Oba będą sprawiać kłopoty, ale, szczególnie w arkuszu stylów wymagającym intensywnego przejścia, nadwyrężą twój CSS. Co ważniejsze, rozmiar pliku również się przyda.Jeśli masz kilka określonych właściwości, które chcesz przenieść w ten sam sposób (ponieważ masz również pewne właściwości, których konkretnie nie chcesz, powiedzmy
opacity
), inną opcją jest zrobienie czegoś takiego (przedrostki pominięto dla zwięzłości):Druga deklaracja zastępuje
all
powyższą deklarację skróconą i sprawia, że (czasami) kod jest bardziej zwięzły.Próbny
źródło
transition-property
zastąpienia, ale także dlatego, że na przykładtransition-delay
należy podać po skrócie (przynajmniej w pakiecie internetowym). Innymi słowy, skrót oznacza atransition-delay
z 0, a samodzielne opóźnienie przed skrótem ustawia go z powrotem na 0.transition: [props] [duration] [easing] [delay]
w każdej nowoczesnej przeglądarcePracuję z tym:
źródło
Dzięki opóźnieniu .5s po przejściu przez właściwość krycia element będzie całkowicie przezroczysty (a przez to niewidoczny) przez cały czas jego zmiany wysokości. Jedyną rzeczą, którą zobaczysz, jest zmiana krycia. Otrzymasz taki sam efekt, jak pozostawienie właściwości height poza przejściem:
„przejście: krycie .5s .5s;”
Czy tego właśnie chcesz? Jeśli nie, a chcesz zobaczyć zmianę wysokości, nie możesz mieć krycia zero przez cały czas jej przejścia.
źródło
Pomogło mi to zrozumieć / usprawnić, tylko to, czego potrzebowałem do animacji:
~ Dotyczy to wszystkich właściwości przejścia (czas trwania, funkcja synchronizacji czasu itp.) W klasie „.base”
źródło
Myślę, że to działa z tym:
źródło