Przejścia CSS to dobry sposób na stworzenie interaktywności., transition do stanu początkowego elementu, a przeglądarka animuje przejście między tymi dwoma stanami. Przejścia dla wewnętrznych zmiennych elementu, takich jak auto stanowiły problem dla twórców stron internetowych od dziesięcioleci, a jedyną opcją było dynamiczne obliczanie wysokości za pomocą JavaScript.
Innym wyzwaniem jest rozpoczęcie przejść, gdy element otrzyma swój pierwszy styl - na przykład, gdy zostanie dodany do DOM lub gdy display-wartość none Ten artykuł wyjaśnia, jak można rozwiązać ten problem za pomocą nowych funkcji CSS, takich jak calc-size(), interpolate-size, @starting-style oraz transition-behavior można opanować.
Rozwiązanie z calc-size()
Jeśli masz element DOM, który rozpoczyna się od stanu zamkniętego (height: 0) do stanu otwartego (height: auto), animacja zazwyczaj nie jest wykonywana, chociaż transition-Dzieje się tak, ponieważ przeglądarki nie ustawiają przejść do zmiennych wewnętrznych, takich jak auto Nowy calc-size()-funkcja umożliwia obliczenia na tych zmiennych wewnętrznych, a tym samym również przejścia:
f95f6dcb193aa903adc84ce47bc4a296
The calc-size()-nie jest jeszcze dostępna we wszystkich przeglądarkach. Rozwiązanie awaryjne można uzyskać, zachowując oryginalną funkcję height: auto-deklaracja.
Rozwiązanie z interpolate-size
The interpolate-size-właściwość pozwala zdefiniować zachowanie interpolacji przeglądarek i zdecydować, czy powinny one być używane między słowami kluczowymi, takimi jak auto Domyślnie interpolacja odbywa się tylko między wartościami liczbowymi. allow-keywords Można jednak aktywować przejścia między słowami kluczowymi:
f95f6dcb193aa903adc84ce47bc4a296
Przez interpolate-size: allow-keywords do :root-element, aktywujesz nowe zachowanie dla całej strony.
Przejście od display:none
Inny problem pojawia się, gdy element display:none do widocznego stanu. display nie jest właściwością animowalną, nie ma animacji. Nowe funkcje CSS pomagają tutaj @starting-style oraz transition-behavior:
f95f6dcb193aa903adc84ce47bc4a296
Z transition-behavior: allow-discrete zapewnia, że animacja zostanie wykonana przed display-wartość block na none Reguły te umożliwiają wykonywanie przejść nawet podczas początkowej aktualizacji stylu. @starting-style-gwarantuje, że animacja zostanie wykonana poprawnie podczas pierwszej aktualizacji stylu.
Obsługa przeglądarki
Nowe nieruchomości są obecnie calc-size() oraz interpolate-size nie są jeszcze obsługiwane przez wszystkie przeglądarki. W Chrome są one dostępne za flagą eksperymentu, ale jeszcze nie w Safari i Firefox. Wsparcie dla transition-behavior w Chrome i Edge, ale nie w Safari i Firefox, co miejmy nadzieję zmieni się w przyszłości.