CSS-Übergänge sind eine gute Möglichkeit, Interaktivität zu erzeugen. Es genügt, transition auf den Ausgangszustand eines Elements anzuwenden, und der Browser animiert den Übergang zwischen den beiden Zuständen. Übergänge für intrinsische Elementgrößen wie auto sind jedoch seit Jahrzehnten ein Problem für Webentwickler, und die einzige Möglichkeit bestand darin, die Höhe dynamisch mit JavaScript zu berechnen.
Eine weitere Herausforderung ist, Übergänge zu starten, wenn ein Element seinen ersten Stil erhält – etwa beim Hinzufügen zum DOM oder wenn sich der display-Wert von none ändert. In diesem Artikel wird erklärt, wie dieses Problem mit den neuen CSS-Funktionen wie calc-size(), interpolate-size, @starting-style und transition-behavior bewältigt werden kann.
Lösung mit calc-size()
Wenn man ein DOM-Element hat, das von einem geschlossenen Zustand (height: 0) zu einem offenen Zustand (height: auto) übergeht, wird die Animation in der Regel nicht ausgeführt, obwohl die transition-Eigenschaft gesetzt ist. Das liegt daran, dass Browser keine Übergänge zu intrinsischen Größen wie auto unterstützen. Die neue calc-size()-Funktion ermöglicht jedoch Berechnungen auf diesen intrinsischen Größen und damit auch Übergänge:
f95f6dcb193aa903adc84ce47bc4a296
Die calc-size()-Funktion ist noch nicht in allen Browsern verfügbar. Ein Fallback kann durch das Beibehalten der ursprünglichen height: auto-Deklaration erreicht werden.
Lösung mit interpolate-size
Die interpolate-size-Eigenschaft erlaubt es, das Interpolationsverhalten von Browsern festzulegen und zu entscheiden, ob diese zwischen Schlüsselwörtern wie auto interpolieren sollen. Standardmäßig wird nur zwischen numerischen Werten interpoliert. Mit allow-keywords kannst du jedoch Übergänge zwischen Schlüsselwörtern aktivieren:
f95f6dcb193aa903adc84ce47bc4a296
Indem du interpolate-size: allow-keywords auf das :root-Element anwendest, aktivierst du das neue Verhalten für die gesamte Seite.
Übergang von display:none
Ein weiteres Problem tritt auf, wenn ein Element von display:none zu einem sichtbaren Zustand übergeht. Da display keine animierbare Eigenschaft ist, findet keine Animation statt. Hier helfen die neuen CSS-Funktionen @starting-style und transition-behavior:
f95f6dcb193aa903adc84ce47bc4a296
Mit transition-behavior: allow-discrete wird sichergestellt, dass die Animation ausgeführt wird, bevor der display-Wert von block auf none umgeschaltet wird. Diese Regeln ermöglichen es, Übergänge auch bei einem ersten Stil-Update auszuführen. Die @starting-style-Regel stellt sicher, dass die Animation bei einem ersten Stil-Update korrekt ausgeführt wird.
Browser-Unterstützung
Derzeit werden die neuen Eigenschaften calc-size() und interpolate-size noch nicht von allen Browsern unterstützt. In Chrome sind sie hinter einem Experiment-Flag verfügbar, in Safari und Firefox jedoch noch nicht. Ebenso ist die Unterstützung für transition-behavior in Chrome und Edge vorhanden, aber nicht in Safari und Firefox. Das wird sich in Zukunft hoffentlich ändern.