transition-behavior
Разрешает переходы дискретных свойств вроде `display` и `overlay`, чтобы элемент успел плавно исчезнуть, прежде чем пропасть.
Синтаксис
transition: display 0.3s allow-discrete;Значения
| Параметр | Тип | Описание |
|---|---|---|
| normal | keyword | По умолчанию: дискретные свойства переключаются мгновенно, без перехода. |
| allow-discrete | keyword | Дискретные свойства участвуют в переходе; `display: none` применяется в самом конце перехода скрытия. |
Примеры
Панель, которая плавно гаснет и только потом действительно пропадает:
<style>
.panel {
padding: 12px; background: lightblue;
transition: opacity 0.4s, display 0.4s allow-discrete;
}
.panel.hidden { opacity: 0; display: none; }
@starting-style { .panel { opacity: 0; } }
</style>
<button onclick="document.querySelector('.panel').classList.toggle('hidden')">Toggle</button>
<div class="panel">Fades out and in</div>Примечания
Обычно его пишут ключевым словом внутри сокращённого transition, как выше. Для появления нужен ещё @starting-style — он задаёт значения «до». Поддерживается всеми актуальными браузерами с 2024 года.
См. также
- transition — Плавно анимирует изменение свойства от старого значения к новому.
- @starting-style — Задаёт стили, с которых элемент начинает при первом появлении, чтобы `transition` анимировал его появление.
- display — Определяет, как элемент ведёт себя в потоке и как раскладывает содержимое.
- interpolate-size — Разрешает переходы к ключевым словам размера и от них — `auto`, `min-content`, `fit-content`. Наконец-то `height: 0` → `height: auto`.
Вопросы и ответы по теме
В учебнике
- Анимация появления и исчезновения — Как плавно показать и спрятать элемент — правило @starting-style, transition-behavior: allow-discrete, переход из display: none, анимация открытия диалога и popover, interpolate-size для height: auto.