内容显示的高度变化过渡

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;
}

作为不代表数值的显示器，您不能对其进行转换。所以使用像高度这样的属性。