Долгое время display: none оставался черным ящиком для CSS-анимаций, заставляя верстальщиков городить костыли из visibility, opacity, max-height и JS-классов. В production это особенно болезненно в UI-компонентах: модальных окнах, дропдаунах и тултипах, где внезапное исчезновение элемента ломает восприятие и UX.
Что меняет transition-behavior: allow-discrete
Ключевое слово, которое легально включает анимацию для дискретных свойств, в первую очередь display. Теперь можно анимировать переход между display: block и display: none с помощью обычных transition без фреймворков или хаков. Браузер запоминает начальное состояние и применяет transition перед скрытием элемента.
Ключевой нюанс: @starting-style
Для анимации появления из none обязательно нужен блок @starting-style, задающий начальные значения. Без него анимация не сработает. Пример для меню:
.menu {
transition: opacity 0.3s ease, display 0.3s allow-discrete;
display: block; opacity: 1;
}
.menu--hidden {
display: none; opacity: 0;
}
@starting-style {
.menu--hidden { opacity: 0; display: none; }
}Производственные сценарии и типичная ошибка
Свойство особенно критично для компонентов с адаптивным поведением, например, мобильного меню или выпадающих фильтров. Типичная ошибка -- забыть указать transition для всех свойств в паре, что приводит к мгновенному скрытию без анимации. Всегда проверяй, что display и animatable-свойства (opacity, transform) объявлены в transition вместе.
Вывод: transition-behavior: allow-discrete и @starting-style превращают скрытие и показ элементов из черного ящика в предсказуемый CSS-паттерн, снижая зависимость от JS и уменьшая визуальную регрессию в интерфейсах.
