Wzorzec 16

Wejścia i wyjścia bez JS

Element wstawiony do DOM przez lata pojawiał się skokiem, a znikał zanim animacja zdążyła ruszyć, więc każdy toast ciągnął za sobą bibliotekę animacji. @starting-style daje przejściu punkt startowy w pierwszej klatce, a allow-discrete odracza display none do końca tranzycji.

Ten sam komunikat, dwa charaktery

Przełączaj kilka razy. Po lewej element pojawia się i znika skokiem, bo display none nie umie się animować. Po prawej @starting-style animuje wejście, a allow-discrete odracza zniknięcie do końca tranzycji.

✕ Zwykłe display none

✓ @starting-style + allow-discrete

Zapisano wersję roboczą. Wróć do niej z historii zmian.

Oba komunikaty wchodzą w miejsce zarezerwowane od pierwszego renderu, więc żaden wariant nie przesuwa treści pod spodem. Różnica dotyczy wyłącznie samego wejścia i wyjścia.

Reguły

Stan startowy wejścia deklaruje @starting-style, nie klasa dokładana w requestAnimationFrame.
Wyjście animuje transition z display i overlay w trybie allow-discrete, element znika po animacji.
Element wchodzi w miejsce zarezerwowane w layoucie, animacja dotyczy opacity i translate.
prefers-reduced-motion skraca wejście i wyjście do natychmiastowej zmiany stanu.

Wzorzec w kodzie

Wejście z @starting-style, wyjście z allow-discrete

.toast {
  transition:
    opacity 0.3s ease,
    translate 0.3s ease,
    display 0.3s allow-discrete;
}
.toast[hidden] {
  display: none;
  opacity: 0;
  translate: 0 0.75rem;
}
@starting-style {
  .toast {
    opacity: 0;
    translate: 0 0.75rem;
  }
}

Bonus: interpolate-size animuje do wysokości auto

:root { interpolate-size: allow-keywords; }

.panel {
  block-size: 0;
  overflow: clip;
  transition: block-size 0.3s ease;
}
.panel[data-otwarty="true"] {
  block-size: auto;
}