导出的动画结束状态不是永久的

Question

我打算设置多个矩形的动画以永久扩展到某个但不一定相同的宽度。为此，我想实现可重用和可配置的动画，并利用useAnimation（）功能。不幸的是，我现在遇到的问题是我的动画结束状态不是永久的。矩形返回其原始状态。

下面的stackblitz示例说明了我目前的工作：

https://stackblitz.com/edit/angular-tefzen?file=src%2Fapp%2Fexpand.component.ts

我是否缺少某些东西，或者还有更好的方法来实现我想要的动画？

export const expandAnimation = animation([
  style({
    width: '{{ width }}px',
   visibility: 'visible'
  }),
  animate('{{ time }}ms {{ offset }}ms')
]);

...

trigger('expandAnimation', [
   transition('normal=>expanded', [
        useAnimation(expandAnimation, {
          params: {
            width: 0,
            time: 1500,
            offset: 0
          }
        })
      ]),
    ]),