display animieren mit transition-behavior und @starting-style

Das Problem: Für den Wechsel von display: none zu display: block gibt es klassischerweise keine Übergänge (Transitions).

Wenn du zum Beispiel eine Overlay-Navigation animiert einblenden willst, hat folgende Anweisung nicht den gewünschten Effekt:

.nav--overlay {
  transform: translateX(-100%);
  display: none;
  transition: transform 0.7s, display 0.7s;

  &--active {
    transform: translateX(0);
    display: block;
  }
}

Durch display wird das Element — die Transition ignorierend — direkt sichtbar und unsichtbar geschaltet.

Um das zu umgehen, gab es bisher zwei Alternativen: entweder mit visibility arbeiten oder im JavaScript darauf warten, dass die Transition zu Ende ist, und dann das Element ausblenden. Aber wenn es um Tastatur-Navigation geht, ist display: none oftmals die einzige Lösung, um sicherzustellen, dass sich der Tab nicht versehentlich in die unsichtbare Overlay-Navigation verirrt.

Die Lösung

Mit transition-behavior: allow-discrete und @starting-style (in den Browsern seit 2024 verfügbar) lässt sich das display-Attribut so manipulieren, dass es so lange wartet, bis der Wechsel abgeschlossen ist.

Am besten schaust du dir dazu die Demo auf Codepen an.

Die Sache hat einen Haken: Stand Firefox 136 gab es dort Probleme beim Ausblenden der Overlay-Navigation — auch bei anderen Demos, die in Chrome und Safari einwandfrei funktionieren.