CSS для отображения: нет при анимации складного контейнера ⇐ CSS

[Anonymous]

У меня есть анимированная складная навигация. Я не хочу, чтобы контент отображался во время его расширения или сжатия, потому что рендеринг/повторный рендеринг во время анимации требует больших затрат (это вызывает задержку рендеринга, а непрозрачности/видимости недостаточно). Другими словами, он должен отображаться display:none, пока навигация анимируется/сворачивается.
Я могу добиться этого с помощью setTimeout() в JavaScript, но мне интересно, есть ли чистое решение этой проблемы на CSS (может быть, с помощью перехода-поведения:allow-discrete?)
Вот мое решение на JavaScript:

Код: Выделить всё

document.querySelector("header").addEventListener("click", () => {
document.querySelector("nav").toggleAttribute("opened");

if (document.querySelector("div").hasAttribute("displayed")) {
document.querySelector("div").toggleAttribute("displayed");
} else {
setTimeout(() => document.querySelector("div").toggleAttribute("displayed"), 500);
}
});

Код: Выделить всё

nav {
background: grey;
display: flex;
flex-direction: column;
height: 20px;
transition: height 0.5s;
width: 500px;
}

nav[opened] {
height: 200px;
}

header {
background: blue;
height: 20px;
}

div {
background: red;
display: none;
flex: 1;
}

div[displayed] {
display: block;
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/798 ... -container