Wzorzec 18

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

Prompt dla Claude

Wklej do Claude Code w swoim projekcie. Prompt niesie komplet reguł tej lekcji i ogólne zasady Liquid Design, więc implementacja trafia w metodologię bez tłumaczenia jej od zera.

Prompt do wklejenia

Zaimplementuj w moim projekcie wzorzec „Wejścia i wyjścia bez JS" z metodologii Liquid Design.

@starting-style animuje pojawienie się elementu, a transition-behavior: allow-discrete pozwala mu zniknąć z animacją, mimo display none.

Wymagania:
- 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.

Ogólne reguły Liquid Design, których implementacja nie może złamać:
- HTML jest semantyczny: button, a, nav, form, label, dialog, details, ul, dl i nagłówki h1-h6 zamiast div z onClick i ARIA dopisywanym ręcznie. div i span służą wyłącznie do layoutu, nigdy do interakcji ani struktury treści.
- Layout jest umową: treść, która dociera później, ma miejsce zarezerwowane od pierwszego renderu. Nic nie skacze.
- Stany ładowania, pustki, błędu i treści dzielą jeden layout.
- Typografia pochodzi z nazwanej, płynnej skali opartej o clamp(), nie z gołych rozmiarów.
- Animacje dotyczą wyłącznie transform i opacity, a prefers-reduced-motion redukuje je do natychmiastowej zmiany stanu.
- Breakpoint jest ostatecznością: najpierw container queries i repeat(auto-fit, minmax(...)).

Sposób pracy – zanim napiszesz pierwszą linię kodu:
- Sprawdź w plikach projektu, jak stylowane są komponenty (Tailwind, CSS Modules, vanilla-extract, styled-components, Sass, czysty CSS...) i pisz wyłącznie w tej konwencji. Niczego nie zakładaj z góry i nie dodawaj nowych zależności.
- Wymagania powyżej opisują właściwości CSS i atrybuty HTML, nie klasy narzędziowe. Przełóż je na system stylowania zastany w projekcie.
- Sprawdź framework komponentów, wersję i konwencje nazewnictwa, zamiast zakładać konkretny stack.
- Używaj istniejących tokenów projektu (kolory, typografia, odstępy). Jeśli czegoś brakuje, zaproponuj minimalne uzupełnienie w duchu istniejącego kodu, nie osobny system.
- Nie używaj klas, tokenów ani API, których nie znalazłeś w tym projekcie.

Pełny opis z żywym demo i kodem: https://liquid-design.website/wzorce/wejscia-i-wyjscia