CSS-Übergangskurzschrift mit mehreren Eigenschaften?

Question

Ich kann die korrekte Syntax für den CSS-Übergang nicht finden Kurzschrift mit mehreren Eigenschaften. Das bringt 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 Klasse show mit javascript hinzu. Das Element wird höher und sichtbar, es gibt nur keinen Übergang. Testen in den neuesten Chrome, FF und Safari.

Was mache ich falsch?

EDIT: Nur um klar zu sein, ich bin auf der Suche nach der Shorthand-Version, um mein CSS zu verkleinern. Es ist aufgebläht genug mit all den Anbieter-Präfixen. Auch erweitert den Beispielcode.

Answer 1

Syntax:

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

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

Einzelne Übergänge, die in Kurzanmeldungen zusammengefasst sind:

-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 weitere mit der Eigenschaft Verzögerung .

---

Edita: Hier wurden die Kompatibilitäten und bekannten Probleme in Bezug auf transition . Aus Gründen der Lesbarkeit entfernt.

Fazit: Verwenden Sie es einfach. Die Beschaffenheit dieser Eigenschaft ist für alle Anwendungen unproblematisch und die Kompatibilität liegt jetzt weltweit bei über 94 %.

Wenn Sie sich immer noch sicher sein wollen, lesen Sie http://caniuse.com/css-transitions

Answer 2

Wenn Sie mehrere bestimmte Eigenschaften haben, die Sie auf die gleiche Weise umwandeln möchten (weil Sie auch einige Eigenschaften haben, die Sie speziell nicht umsteigen wollen, sagen wir opacity ), ist eine weitere Möglichkeit, wie folgt zu verfahren (Präfixe wurden der Kürze halber weggelassen):

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

Die zweite Erklärung hebt die all in die darüber liegende Deklaration ein und sorgt so für (gelegentlich) prägnanteren 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>

Démo

Answer 3

Damit habe ich es geschafft:

.element {
   transition: height 3s ease-out, width 5s ease-in;
}

Answer 4

Ein wichtiger Punkt ist, dass die CSS transition Eigenschaft selbst ist eine Kurzform - wie in der MDN-Webdokumente :

Le site transition CSS-Eigenschaft ist eine Kurzbezeichnung für transition-property , transition-duration , transition-timing-function y transition-delay .

Die ideale Anwendung dieser Kurzschrift ist die Kombination der verschiedenen Eigenschaften der Inhaltsstoffe eines einzigen Übergangs. Wenn dies verwendet wird, um mehrere Übergänge zu kombinieren, wird es klobig.

Wenn Sie also mehr als 2 Übergänge für dasselbe Element mit unterschiedlichen Eigenschaften haben, ist es einfacher, sie einzeln zu schreiben, anstatt die transition Kurzschrift. Zum Beispiel:

Dies ist die Kurzversion (Option 1) von mehreren Übergängen auf einem Element:

transition: transform 0.5s ease-in-out, box-shadow 0.2s ease-out, filter 0.1s ease-out, color 0.25s ease-in 0.2s;

Wie Sie sehen können, ist dies umständlich und etwas schwieriger zu visualisieren.
Das gleiche CSS kann wie folgt angewendet werden (Option 2):

transition-property: transform, box-shadow, filter, color;
transition-duration: 0.5s, 0.2s, 0.2s, 0.25s;
transition-timing-function: ease-in-out, ease-out, ease-out, ease-in;
transition-delay: 0s, 0s, 0s, 0.2s

Letztendlich kommt es natürlich darauf an, wie Sie Ihren Quellcode schreiben und pflegen wollen. Ich persönlich bevorzuge jedoch die zweite Option.

---

TIPP:

Ein weiterer Vorteil besteht darin, dass Sie eine Eigenschaft, die für alle Übergänge gleich ist, nicht mehrmals erwähnen müssen. Wenn zum Beispiel im obigen Beispiel die transition-duration war derselbe( 0.5s ) für alle, schreiben Sie es so:

transition-property: transform, box-shadow, filter, color;
transition-duration: 0.5s;
transition-timing-function: ease-in-out, ease-out, ease-out, ease-in;
transition-delay: 0s, 0s, 0s, 0.2s

Answer 5

Durch die Verzögerung von 0,5s beim Übergang der Opazitätseigenschaft wird das Element während der gesamten Zeit, in der seine Höhe übergeht, vollständig transparent (und damit unsichtbar) sein. Das Einzige, was Sie tatsächlich sehen werden, ist die Änderung der Deckkraft. So erhalten Sie den gleichen Effekt wie das Verlassen der Höhe Eigenschaft aus dem Übergang:

"Übergang: Opazität .5s .5s;"

Ist es das, was Sie sich wünschen? Wenn nicht, und Sie wollen, um die Höhe Übergang zu sehen, können Sie nicht eine Deckkraft von Null während der gesamten Zeit, dass es den Übergang ist.