在mat-tab中使用Angular扩展动画

Question

我是学生，正在做毕业设计。我在Angular动画中遇到一些问题。我会在下面解释...
首先，这是我的StackBlitz，请访问。
我希望仅在所选角色为“学生”时显示。见下图
当未选择角色或学生不相等时，它将隐藏。参见下图。但是，虽然未显示，但似乎它的高度（或旁边的元素）仍然存在，导致滚动条和“空白”区域

我试图将其设置为显示：无，

state(
    "out",
    style({
        "max-height": "0px",
        "opacity": "0",
        "visibility": "hidden",
        "display": "none"
    })
),

但是当我这样做时，扩展动画将消失。 你能指出我哪里错了吗？

注意：只有将<form>放在mat-tab中时才会遇到此问题。当我不理会它时，代码可以正常工作。这是StackBlitz

Answer 1

我找到了解决方案，方法是将此CSS添加到我的<form>标记中

.custom {
  overflow-y: hidden !important;
}