html - 具有变换和显示属性的动画子菜单

Question

好的，所以我在侧边栏中有这个子菜单，但是在制作动画时遇到了问题。我曾尝试将该transform属性与 结合使用display: none;，但它仍然会立即打开。如果我只使用transform，它会占用空间......有什么办法可以解决这个问题，有变换还是没有变换？

.hide-submenu {
    display: none;
    transform: scaleY(0);
}

.show-submenu {
    transform: scaleY(1);
}

这是一个 Stackblitz 示例：https ://stackblitz.com/edit/angular-bvk6ku?file=src%2Fapp%2Fapp.component.ts

标签： htmlcssangulartypescript