CSS-Übergangskürzel mit mehreren Eigenschaften?

519

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.

Gregory Bolkenstijn
quelle
2
Überprüfen Sie diese Dokumentation. developer.mozilla.org/en/CSS/CSS_transitions
Websymphony
3
Ändern Sie tatsächlich die Werte für Höhe und Deckkraft? Ansonsten ändern sie sich nicht
yunzen
Ich bin mit CSS-Übergängen nicht besonders vertraut - sind die Doppelwerte .5snach opacitybeabsichtigt?
BoltClock
Die Dokumentation enthält kein Beispiel für die Verwendung der Kurzversion mit mehreren Eigenschaften. Die Höhe ändert sich von 0 auf 200px, die Deckkraft von 0 auf 1. Die zweite .5s ist eine Verzögerung des Opazitätsübergangs. Ich möchte, dass ein Element an Höhe
zunimmt
2
Ach ja, der Verzögerungswert.
BoltClock

Antworten:

752

Syntax:

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

Beachten Sie, dass die Dauer vor der Verzögerung liegen muss, wenn letztere angegeben ist.

Einzelne Übergänge kombiniert in Kurzdeklarationen:

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

Oder einfach alle umstellen:

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

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

Rémi Breton
quelle
1
Hast du das versucht? Es funktioniert nicht bei mir. Ich kann auch nicht die Eigenschaft all verwenden, da die zweite Eigenschaft verzögert ist.
Gregory Bolkenstijn
3
Gibt es irgendwelche Auswirkungen auf Leistung, Speicher oder andere Aspekte, allanstatt die spezifischen Eigenschaften aufzulisten? ZB, wenn ich einen Übergang plane backgroundund colornur - bin ich besser dran, beide anzugeben oder nur zu verwenden all? Gibt es auch - da IE6-9 keine Übergänge unterstützt und IE10 sie nicht vorfixiert unterstützt - Vor- oder Nachteile beim Einbeziehen der ms-transition:Anweisungen?
Mattstuehler
9
Es gibt definitiv eine Auswirkung auf die Leistung beim Übergang aller Eigenschaften anstatt nur der von Ihnen benötigten. Es kann zu ernsthaften Schäden führen, wenn viele Elemente alle Eigenschaften gleichzeitig übertragen. Über ms-transition, ich kenne keinen Grund, jetzt, wo IE10 raus ist, warum jemand immer noch ms-transitionanstelle des Standards verwenden würde transition. 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.
Rémi Breton
3
Ich hatte das gleiche Problem und es schien, dass die Verwendung von "Übergang: Deckkraft 1s .5s, maximale Höhe .5s 0" nicht funktionierte, während "Übergang: Deckkraft 1s .5s, maximale Höhe .5s 0s" war. Zum ersten Mal sehe ich eine Einheit, die für einen Nullwert in CSS erforderlich ist!
mlarcher
5
Es sei darauf hingewiesen, dass die Verwendung von 'all' langsamer ist als die Angabe bestimmter Eigenschaften.
Nathan
433

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):

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

Die zweite Deklaration überschreibt die allin der darüber liegenden Kurzschrift stehende Erklärung und sorgt für (gelegentlich) präziseren Code.

/* prefixes omitted for brevity */
.box {
    height: 100px;
    width: 100px;
    background: red;
    box-shadow: red 0 0 5px 1px;
    transition: all 500ms ease;
    /*note: not transitioning width */
    transition-property: height, background, box-shadow;
}

.box:hover {
  height: 50px;
  width: 50px;
  box-shadow: blue 0 0 10px 3px;
  background: blue;
}
<p>Hover box for demo</p>
<div class="box"></div>

Demo

Jason
quelle
4
Das ist nützlich! Nicht nur wegen der transition-propertyÜberschreibung, sondern auch, weil zum Beispiel transition-delaynach der Kurzschrift angegeben werden muss (zumindest im Webkit). Mit anderen Worten, die Kurzschrift impliziert eine transition-delay0 und setzt eine eigenständige Verzögerung, bevor die Kurzschrift sie auf 0
zurücksetzt
@duncanwilcox können Sie transition: [props] [duration] [easing] [delay] in jedem modernen Browser tun
Jason
9
Bevorzugen Sie diese Antwort VIEL mehr als die akzeptierte Antwort.
Erutan409
3
schön! mag den Ansatz wirklich!
wasddd_
36

Ich arbeite damit:

element{
   transition : height 3s ease-out, width 5s ease-in;
}
AhbapAldirmaz
quelle
Dies ist, was ich gesucht habe - Abkürzung für mehrere Eigenschaften. Vielen Dank!
Adam Moisa
2

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.

JB
quelle
Dies funktioniert auch nicht, da die Höhe während des Übergangs der Deckkraft 0 bleibt.
Xesau
0

Dies half mir zu verstehen / zu rationalisieren, nur was ich zum Animieren brauchte:

// SCSS - Multiple Animation: Properties | durations | etc.
// on hover, animate div (width/opacity) - from: {0px, 0} to: {100vw, 1}

.base {
  max-width: 0vw;
  opacity: 0;

  transition-property: max-width, opacity; // relative order
  transition-duration: 2s, 4s; // effects relatively ordered animation properties
  transition-delay: 6s; // effects delay of all animation properties
  animation-timing-function: ease;

  &:hover {
    max-width: 100vw;
    opacity: 1;

    transition-duration: 5s; // effects duration of all aniomation properties
    transition-delay: 2s, 7s; // effects relatively ordered animation properties
  }
}

~ Dies gilt für alle Übergangseigenschaften (Dauer, Übergangszeitfunktion usw.) innerhalb der Klasse '.base'

gav_aus_web
quelle
-4

Ich denke das funktioniert damit:

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