角弹性输入高度动画

Question

我是Angular动画的新手，需要在列表及其项目上实现以下动画。我希望动画的结果如下：

我已经阅读了文档，而我能够整理的最接近的内容如下：

export const items = trigger('items', [
  transition(':enter', [
    style({ 'max-height': '1px' }),
    animate(1000, style({ 'max-height': '150px' }))
  ]),
  transition(':leave', [
    group([
      animate('0.5s ease', style({ transform: 'translateY(-20%)', 'height': '0px' })),
      animate('0.5s 0.2s ease', style({ opacity: 0 }))
    ])
  ])
]);


 export const list = trigger('list', [
    transition(':enter', [
      query('@items', stagger(500, animateChild()))
    ])
  ]);

我使用了更长的动画时间，所以我可以看到它发生的很慢，以确保它在做我想要的

但是，这几乎无法实现我想要的结果，我很沮丧。谁能指出我正确的方向，或者我可能会遗漏/弄错了什么？