@starting-style + transition-behavior: enter/exit-анимации для dialog и popover без JS-классов

В production-модалках, меню, кабинетах, design systems и SaaS-интерфейсах анимация часто ломалась из-за display, top layer и быстрых повторных кликов. Типичная ошибка - хранить фазы в JS-классах и ждать transitionend.

Что меняется

@starting-style задаёт старт для элемента, который только появился: dialog[open] или :popover-open. transition-behavior: allow-discrete позволяет удержать дискретные display и overlay до конца exit-анимации, включая ::backdrop.

dialog,[popover]{
  opacity:0;
  transform:translateY(12px) scale(.98);
  transition:
    opacity .2s,
    transform .2s,
    display .2s allow-discrete,
    overlay .2s allow-discrete;
}

dialog[open],
[popover]:popover-open{
  opacity:1;
  transform:none;
}

@starting-style{
  dialog[open],
  [popover]:popover-open{
    opacity:0;
    transform:translateY(12px) scale(.98);
  }
}

Где trade-off

Состояние остаётся у платформы: popover может открываться через popovertarget, а для dialog нужны только showModal()/close(). Практический совет: анимируйте opacity и transform, а display/overlay добавляйте только как discrete-свойства для стабильного выхода.

Предупреждение

@starting-style нужен для входа, не для выхода. Exit берётся из закрытого состояния. Без allow-discrete элемент исчезнет мгновенно, и регрессия проявится на быстрых кликах, слабых устройствах или в компонентной библиотеке.

Вывод:
Для dialog и popover лучше держать состояние в нативных механизмах, а анимационные фазы описывать в CSS без лишних JS-классов.