平滑折叠/展开的角度动画 *ngIf 内容可变高度

Question

我想创建一个 Angular 动画，当从 DOM 添加/删除容器的内容时，该动画可以平滑地展开/折叠容器。

（如果内容永远不会离开 DOM，这是一个简单的 CSS 修复，但我需要处理通过 *ngIf 语句添加/删除内容的情况）。

我已成功完成以下工作：

https://stackblitz.com/edit/angular-x6gagz?file=src/app/components/parent/parent.component.css

上述问题是文本在容器展开之前出现（请注意，当单击展开时，底部的“长内容”在容器向下展开之前出现）。这会导致我的应用程序中的内容重叠，这看起来不太好。

我以为我可以调整不透明度，以便新内容在结束之前不会出现，但每当我尝试使用关键帧更改内容时，高度就会停止动画。

例如，我尝试过这样的事情：

export const experiment = trigger('grow', [
  transition('void <=> *', []),
  transition('* <=> *',[
    style({ height: '{{startHeight}}px', opacity: 0 }), 
    animate(1000, keyframes([
      style({
        opacity: 0, 
        offset: 0.8
      }),
      style({
        opacity: 1, 
        offset: 1
      }),
    ]))
  ],
    {
      params: { startHeight: 0 },
    }
  ),
]);

这使得不透明度起作用，但高度动画停止起作用？

Answer 1

尝试添加“溢出：隐藏；”按照您想要折叠的部分的样式，这已经解决了我的问题，或者您可以尝试按照此“https://stackblitz.com/edit/angular-animated-collapsible-block?file=src% 2Fapp%2Fapp.component.html"，这是一个简单的教程，它已经为我完成了工作。