Ruch
Krótki, celowy ruch, który wyjaśnia, skąd elementy się biorą i dokąd znikają. Czasy trwania i krzywe przejścia są tokenami, a sprężyny działają w czystym CSS.
Ruch w prfct ma jedno zadanie: wyjaśniać zmianę. Menu wyrasta z przycisku, który je otworzył; okno dialogowe wznosi się na swoje miejsce; gałka przełącznika sprężyście przeskakuje po torze. Nic nie rusza się tylko po to, żeby było widać, że się rusza.
Kompilacja zakończona
Pojawia się w 220 ms (ease-enter), znika w 100 ms (ease-exit).
Zasady
Responsywny. Informacja zwrotna pojawia się w ciągu 100 ms od działania użytkownika. Stany najechania i naciśnięcia są niemal natychmiastowe; interfejs nigdy nie czeka z reakcją, aż skończy się animacja.
Kierunkowy. Elementy wchodzą ze swojego źródła — od strony wyzwalacza, od krawędzi ekranu — i wychodzą tą samą drogą. Wyskakujące elementy skalują się od --transform-origin, zmiennej, którą Base UI ustawia na punkt zakotwiczenia.
Asymetryczny. Elementy znikają szybciej, niż się pojawiają. Wyjścia mają krótsze czasy trwania i przyspieszające krzywe, więc zamykanie nigdy nie wydaje się ociężałe.
Opcjonalny. Ruch to ozdoba nałożona na działający interfejs. Po włączeniu ograniczenia ruchu wszystko nadal działa — tyle że natychmiast.
Czasy trwania
Krzywe przejścia
prfct ma cztery krzywe cubic-bézier i dwie sprężyny. Sprężyny są symulowane na podstawie parametrów fizycznych (sztywności i tłumienia) i zapisane jako funkcje CSS linear() — to prawdziwy ruch sprężyny w przejściach CSS, bez biblioteki animacji i bez JavaScriptu w głównym wątku.
Każda kropka pokonuje ten sam dystans w czasie swojego tokenu.
Domyślna dla elementów, które zmieniają się w miejscu.
Elementy wchodzące na ekran. Szybki start, długie wyhamowanie.
Elementy znikające. Przyspiesza przy wyjściu; łącz z krótszymi czasami.
Elementy przemieszczające się z miejsca na miejsce na ekranie.
Fizyczna, responsywna reakcja: przełączniki, puszczenie po przeciągnięciu, popovery.
Zabawne podkreślenie: potwierdzenia sukcesu, pojawiające się odznaki.
// A switch thumb that settles like a physical toggle
<span className="transition-transform duration-spring ease-spring" />Klasy choreografii
Komponenty współdzielą ruch dzięki trzem klasom narzędziowym, więc każda nakładka w systemie porusza się tak samo:
Sterują nimi atrybuty data-starting-style i data-ending-style z Base UI, więc animacje da się przerwać: zamknięcie menu w połowie otwierania płynnie odwraca ruch od miejsca, w którym akurat jest.
Ograniczony ruch
Gdy system operacyjny prosi o ograniczenie ruchu, prfct skraca każde przejście i każdą animację do zera. Połysk szkieletów ładowania i obrót spinnera się zatrzymują; stan nadal się zmienia, więc nic nie ginie. Ponieważ prfct nigdy nie przekazuje znaczenia ruchem, jest to zawsze bezpieczne.