@starting-style и transition-behavior для анимаций появления
Вот оно, применение новых фичей в CSS в комбинации, которая как будто много кому будет полезна. Идём по шагам:
1. Новое правило
2.
3. Применяем это на относительно свежий
4. Посыпаем сверху
На выходе получаем классные анимации появления модалок, всплывашек и, при желании, чего угодно, что появляется из ниоткуда (`display: none`, в смысле). Причём если раньше у вас этого просто не было, то добавив такое прогрессивным улучшением у пользователя по сути вы ничего не ломаете.
Адам Аргайл объясняет каждый шаг и показывает на примере, как оно может работать.
https://nerdy.dev/using-starting-style-and-transition-behavior-for-enter-and-exit-stage-effects
Вот оно, применение новых фичей в CSS в комбинации, которая как будто много кому будет полезна. Идём по шагам:
1. Новое правило
@starting-style. Описывает стили, которые у элементов устанавливаются в тот момент, когда их ещё нет, но как только они появятся, с них стартует анимация. Например, при вставке в DOM нового узла.2.
transition-behavior: allow-discrete говорит браузеру «анимировать» дискретные значения типа display: none. То есть изменение таких свойств произойдёт не мгновенно на первый же кадр анимации, а через transition-duration.3. Применяем это на относительно свежий
dialog и вполне себе свежий popover. Играем с opacity, scale и display (раз он у нас теперь отложенный).4. Посыпаем сверху
@media (prefers-reduced-motion: no-preference), не забываем о доступности.На выходе получаем классные анимации появления модалок, всплывашек и, при желании, чего угодно, что появляется из ниоткуда (`display: none`, в смысле). Причём если раньше у вас этого просто не было, то добавив такое прогрессивным улучшением у пользователя по сути вы ничего не ломаете.
Адам Аргайл объясняет каждый шаг и показывает на примере, как оно может работать.
https://nerdy.dev/using-starting-style-and-transition-behavior-for-enter-and-exit-stage-effects