Теперь в базовой версии: анимация эффектов входа

Una Kravets

В сообщении о четырех новых функциях CSS для эффектов входа и выхода были представлены некоторые полезные функции, которые только что появились в Chrome. Теперь две из этих функций, @starting-style иtransition-behavior:allow-discrete, стали базовыми, недавно доступными с выпуском Firefox 129. Теперь вы можете создавать эффекты анимации входа для элементов, включая те, которые анимируются из display: none и анимация в верхний слой.

Настройка эффектов входа с помощью @starting-style

Правило @starting-style определяет исходные стили элемента перед его отображением на странице. Это необходимо для элементов, которые анимируются из display: none , поскольку им нужно состояние, из которого можно анимировать.

Используйте @starting-style как и любое другое правило CSS, помещая в него стили элемента. Например, с помощью <dialog> поместите стили dialog[open] в правило @starting-style . Это стили, используемые до открытия диалогового окна.

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

Включение дискретной анимации с помощьюallow allow-discrete

Второе, что необходимо для поддержки анимации входа для элементов, которые анимируются из display: none , таких как диалоговые окна и всплывающие окна, — это включить новый режим анимации для поддержки анимации дискретных свойств . Дискретные свойства — это свойства, значения которых не могут интерполироваться. Вы можете думать об этом как о переключателе включения/выключения. Некоторые примеры включают display , visibility , mix-blend-mode — любое свойство, в котором признак имеет то или иное значение. Благодаря этому новому режиму анимации браузер теперь поддерживает замену значений в точке 50%, а не в точке 0% перехода.

Используйте один из следующих двух способов анимировать эффекты ввода для display: none и visibility: hidden элементы:

• Автономное свойство transition-behavior со значением allow-discrete .
• allow-discrete значение в вашем сокращении перехода.

Мы рекомендуем второй метод, поскольку применение transition-behavior включено в стенографию transition . Если вы применитеtransition transition-behavior: allow-discrete перед сокращением перехода, где вы применяете функции перехода, времени и плавности, браузер проигнорирует transition-behavior .

Если вы используете это в сокращении, вам нужно применить ключевое словоallow allow-discrete только к конкретным свойствам, которые требуют дискретной анимации. Это продемонстрировано в следующем коде CSS, в котором происходит переход как к свойству translate , так и к свойству display , но к свойству display применяется только ключевое словоallow allow-discrete .

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

Демо: собираем все вместе

Использование этих функций особенно полезно для элементов верхнего уровня, таких как элемент <dialog> или компоненты, использующие атрибут popover . В следующем примере элемент <dialog> анимируется от нижней части области просмотра (первоначально начиная с вертикального перемещения за пределы экрана на 100vh) к центру области просмотра, удаляя перевод, когда <dialog> открыт.

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

Вы можете написать это более кратко с помощью вложенности CSS, которая также является новой доступной функцией Baseline.

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

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

Заключение

Приятно видеть такой прогресс в Baseline, и, по крайней мере, это хорошее прогрессивное улучшение этих элементов. Без этих функций эффектов входа элементы, которые анимируются в верхнем слое или в стиле display: none просто не появятся на вашей странице без перехода, как это происходит сегодня.

Чтобы узнать, как добавлять эффекты выхода в более усовершенствованной форме, прочтите статью «Четыре новые функции CSS для плавной анимации входа и выхода» , а чтобы узнать больше об этих функциях, посетите следующие ресурсы документации:

• @starting-style на MDN
• поведение перехода на MDN