Конечное состояние экспортируемых анимаций не является постоянным

Question

Я намерен анимировать несколько прямоугольников, чтобы постоянно расширяться до определенной, но не обязательно одинаковой ширины.Для этого я хотел реализовать многоразовую и настраиваемую анимацию и воспользоваться функциональностью useAnimation ().К сожалению, теперь у меня есть проблема, что мое конечное состояние анимации не является постоянным.Прямоугольник возвращается в исходное состояние.

Следующий пример стекаблиц иллюстрирует мои текущие усилия:

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
          }
        })
      ]),
    ]),