Как сделат плавное появление меню?

Question

[San Manjiro]

Я пытался сделать через transition, но меню просто резко появляется и скрывается, без какой либо плавности:

.site-header__faqs {
  display: flex;
  align-items: flex-start;
  border-top: 1px solid rgb(207, 206, 216);
  height: 0;
  opacity: 0;
  transition: opacity 0.3s ease-out, height 0s linear 0.3s, max-height 0.3s ease-out; /* добавляем transition для max-height */
  max-height: 0; /* добавляем начальное значение max-height */
  overflow: hidden; /* скрываем содержимое, которое выходит за границы элемента */
}

.site-header__faqs.show {
  height: max-content;
  opacity: 1;
  transition: opacity 0.3s ease-out, height 0s linear 0s, max-height 0.3s ease-out 0.3s; /* обновляем transition для max-height */
  max-height: none; /* сбрасываем значение max-height */
}

Также я попытался сделать через animation, но меню появлсяется плавно только в том случаи, если max-height в @keyframes задать конкретно, допустим 200px, но мне надо чтобы анимация появлялся только на max-content блока:

.site-header__faqs {
    display: flex;
    align-items: flex-start;
    border-top: 1px solid rgb(207, 206, 216);
}

.site-header__faqs.show {
    animation-name: slide-down;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
    height: max-content;
    max-height: none;
}

@keyframes slide-down {
    0% {
        height: 0;
        opacity: 0;
    }
    100% {
        max-height: 100vh;
        opacity: 1;
    }
}

Answer 1

[Stalker_RED]

Вы не можете анимировать от 0 до none.
Можно от 0 до 9999, или от 42 до 48, но какие числа движок должен подставить между 0 и none? Вот он никакие и не подставляет.

Хинт: можно анимировать от 0vh до 100vh.