Teraz w grupie Baseline: animowanie efektów wejścia

Una Kravets

W poście o czterech nowych funkcjach CSS dotyczących efektów wejścia i wyjścia przedstawiliśmy kilka przydatnych funkcji, które właśnie pojawiły się w Chrome. Obecnie w wersji 129 przeglądarki Firefox w wersji 129 dwie z tych funkcji, @starting-style i transition-behavior: allow-discrete, stały się nowym standardem Baseline. Możesz teraz tworzyć efekty animacji wejścia dla elementów, w tym tych animowanych z elementu display: none, a także tych animowanych w górnej warstwie.

Konfigurowanie efektów wejścia za pomocą funkcji @starting-style

Reguła @starting-style definiuje początkowe style elementu, zanim zostanie on wyrenderowany na stronie. Jest to wymagane w przypadku elementów, które animują się w języku od display: none, ponieważ potrzebują stanu, w którym będą animowane.

Użyj atrybutu @starting-style jak każdej innej reguły w kodzie CSS, umieszczając w nim style elementu. Na przykład za pomocą funkcji <dialog> umieść style dialog[open] w regule @starting-style. To są style używane przed otwarciem okna.

@starting-style {
  dialog[open] {
    /*   Styles before the dialog opens   */
  }
}

Włączanie dyskretnych animacji za pomocą funkcji allow-discrete

Drugą rzeczą, która wymaga obsługi animacji wejścia w przypadku elementów animowanych z display: none, takich jak okna i wyskakujące okienka, jest włączenie nowego trybu animacji do obsługi animacji określonych właściwości. Właściwości dyskretne to takie, które nie mogą interpolować między wartościami. Możesz je traktować jak przełączniki. Przykłady obejmują m.in. display, visibility, mix-blend-mode – dowolną właściwość, w której cecha jest taka lub inna wartość. W nowym trybie animacji przeglądarka obsługuje teraz zamianę wartości w punkcie 50%, a nie w punkcie przejścia 0%.

Użyj jednego z 2 sposobów animowania efektów wejścia w elementy display: none i visibility: hidden:

• Samodzielna usługa transition-behavior o wartości allow-discrete.
• Wartość allow-discrete w krótkim opisie przejścia.

Zalecamy drugą metodę, ponieważ stosowanie transition-behavior odbywa się w skrócie transition. Jeśli zastosujesz skrót transition-behavior: allow-discrete przed skrótem przejścia, w którym stosujesz funkcje przejścia, czasu i wygładzania, przeglądarka zignoruje parametr transition-behavior.

Jeśli używasz tego skrótu, musisz zastosować słowo kluczowe allow-discrete tylko do konkretnych właściwości, które wymagają dyskretnych animacji. Widać to w poniższym kodzie CSS, który przenosi zarówno właściwość translate, jak i display, ale stosuje tylko słowo kluczowe allow-discrete do właściwości display.

transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

Prezentacja: jak to wszystko połączyć

Korzystanie z tych funkcji jest szczególnie przydatne w przypadku elementów górnych, takich jak element <dialog> lub komponenty używające atrybutu popover. W poniższym przykładzie element <dialog> jest animowany od dołu widocznego obszaru (początkowo od przesunięcia w pionie 100 vh poza ekran) do środka widocznego obszaru, co usuwa przesunięcie, gdy <dialog> jest otwarty.

/* Before the dialog opens */
@starting-style {
  dialog[open] {
  translate: 0 100vh;
  }
}

/* Dialog is-open state */
dialog[open] {
  translate: 0 0;
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
}

Możesz też napisać to bardziej zwięźle, korzystając z zagnieżdżania CSS, które jest też nowo dostępną funkcją bazową.

dialog[open] {
  translate: 0 0;
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

  @starting-style {
    translate: 0 100vh;
  }
}

Podsumowanie

Obserwowanie takich postępów jak w przypadku punktu odniesienia jest ekscytujące, a przynajmniej to miłe, progresywne ulepszenie tych elementów. Bez tych funkcji efektu wejścia elementy animowane w górnej warstwie lub w stylu display: none będą po prostu wyświetlane na stronie bez przejść, tak jak ma to miejsce obecnie.

Aby dowiedzieć się, jak stopniowo dodawać efekty wyjścia w coraz ulepszony sposób, przeczytaj artykuł „Cztery nowe funkcje CSS zapewniające płynne animacje wejścia i wyjścia”. Więcej informacji o tych funkcjach znajdziesz w dokumentacji:

• @starting-style w MDN
• Zachowanie przejścia w MDN