Ich kann anscheinend nicht die richtige Syntax für die Kurzform des CSS-Übergangs mit mehreren Eigenschaften finden. Das macht nichts:
.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;
}
Ich füge die Showklasse mit Javascript hinzu. Das Element wird höher und sichtbar, es geht einfach nicht über. Testen in den neuesten Versionen von Chrome, FF und Safari.
Was mache ich falsch?
EDIT: Um ganz klar zu sein, ich suche nach der Kurzversion, um mein CSS zu verkleinern. Es ist mit allen Herstellerpräfixen aufgebläht genug. Erweitert auch den Beispielcode.
css
webkit
css-transitions
shorthand
Gregory Bolkenstijn
quelle
quelle
.5s
nachopacity
beabsichtigt?Antworten:
Syntax:
Beachten Sie, dass die Dauer vor der Verzögerung liegen muss, wenn letztere angegeben ist.
Einzelne Übergänge kombiniert in Kurzdeklarationen:
Oder einfach alle umstellen:
Hier ist ein einfaches Beispiel . Hier ist eine andere mit der Verzögerungseigenschaft .
Bearbeiten: Zuvor hier aufgelistet waren die Kompatibilitäten und bekannten Probleme in Bezug auf
transition
. Zur besseren Lesbarkeit entfernt.Fazit: Verwenden Sie es einfach. Die Art dieser Eigenschaft ist für alle Anwendungen nicht störend und die Kompatibilität liegt jetzt weltweit weit über 94%.
Wenn Sie dennoch sicher sein möchten, lesen Sie http://caniuse.com/css-transitions
quelle
all
anstatt die spezifischen Eigenschaften aufzulisten? ZB, wenn ich einen Übergang planebackground
undcolor
nur - bin ich besser dran, beide anzugeben oder nur zu verwendenall
? Gibt es auch - da IE6-9 keine Übergänge unterstützt und IE10 sie nicht vorfixiert unterstützt - Vor- oder Nachteile beim Einbeziehen derms-transition:
Anweisungen?ms-transition
, ich kenne keinen Grund, jetzt, wo IE10 raus ist, warum jemand immer nochms-transition
anstelle des Standards verwenden würdetransition
. Es wird keine Probleme bereiten, beides zu haben, aber es wird Ihr CSS aufblähen, insbesondere auf einem übergangslastigen Stylesheet. Noch wichtiger ist, dass die Dateigröße ebenfalls einen Treffer erzielt.Wenn Sie mehrere spezifische Eigenschaften haben, die Sie auf die gleiche Weise übergehen möchten (weil Sie auch einige Eigenschaften haben, die Sie speziell nicht übergehen möchten
opacity
), können Sie auch Folgendes tun (der Kürze halber werden Präfixe weggelassen):Die zweite Deklaration überschreibt die
all
in der darüber liegenden Kurzschrift stehende Erklärung und sorgt für (gelegentlich) präziseren Code.Demo
quelle
transition-property
Überschreibung, sondern auch, weil zum Beispieltransition-delay
nach der Kurzschrift angegeben werden muss (zumindest im Webkit). Mit anderen Worten, die Kurzschrift impliziert einetransition-delay
0 und setzt eine eigenständige Verzögerung, bevor die Kurzschrift sie auf 0transition: [props] [duration] [easing] [delay]
in jedem modernen Browser tunIch arbeite damit:
quelle
Durch die Verzögerung von 0,5 Sekunden beim Übergang der Opazitätseigenschaft ist das Element während des gesamten Übergangs seiner Höhe vollständig transparent (und somit unsichtbar). Das einzige, was Sie tatsächlich sehen werden, ist die Änderung der Deckkraft. Sie erhalten also den gleichen Effekt, als würden Sie die Eigenschaft height aus dem Übergang herauslassen:
"Übergang: Opazität .5s .5s;"
Wollen Sie das? Wenn nicht, und Sie möchten den Höhenübergang sehen, können Sie während der gesamten Übergangszeit keine Deckkraft von Null haben.
quelle
Dies half mir zu verstehen / zu rationalisieren, nur was ich zum Animieren brauchte:
~ Dies gilt für alle Übergangseigenschaften (Dauer, Übergangszeitfunktion usw.) innerhalb der Klasse '.base'
quelle
Ich denke das funktioniert damit:
quelle