Переход изменения высоты при отображении содержимого

Question

Я работаю в приложении Angular 9 и мне нужно сделать аккордеонное меню. С моим кодом все работает нормально, кроме анимации подменю. Я хочу анимировать содержимое элемента подменю, когда отображение изменяется с «блок» на «нет», а также анимировать его при изменении с «блока» на «нет».

вот пара примеров того, что мне нужно

https://codyhouse.co/demo/multi-level-accordion-menu/index.html

https://primer.fusepx.com/angular/

Я также хочу сохранить структуру кода как можно больше. Мне просто действительно нужна анимация содержимого

Вот пример stackblitz с моим кодом.

https://stackblitz.com/edit/angular-ivy-t6rbdp

Answer 1

Попробуйте это

.content {
    padding: 10px;
    background-color: blue;
    height: 0 !important;
    overflow-y: hidden;
    transition: height 0.5s ease-in-out;
}
.content-open {
    opacity: 1;
    height: 100px !important;
}

В качестве дисплея, который действительно представляет числовые c значения, вы не можете выполнить переход по нему. Поэтому используйте такие свойства, как высота.