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