Как сделать параметризованную анимацию с помощью animate.enter в Angular 21? ⇐ CSS

[Anonymous]

В настоящее время я переношу свои проекты из @angular/animations в анимацию CSS, поскольку библиотека анимации устарела и будет удалена в Angular 23.
Миграция анимации в CSS-анимацию и animate.enter на данный момент кажется простой задачей. Но теперь я столкнулся с этой анимацией, которую хочу перенести в animate.enter:

Код: Выделить всё

trigger('expandLeft', [
state(
'opened',
style({
width: '100%',
}),
),
state(
'closed',
style({
width: '{{ width }}%',
}),
{ params: { width: 30 } },
),
state(
'*',
style({
width: '100%',
}),
),
transition('* => closed', animate('600ms ease-in')),
transition('opened => closed', animate('600ms ease-in')),
transition('closed => opened', animate('600ms ease-in')),
]),

Как вы можете видеть в этой анимации, я использую параметр {{width}}, который описывает ширину боковой панели. Анимация применяется к этой боковой панели. Представьте себе страницу с боковой панелью слева и контентом справа. Как только запускается анимация, боковая панель расширяется на всю ширину (100%), а область содержимого исчезает. Если статус «закрыт», он делает противоположное и уменьшает боковую панель до значения параметра {{width}
Как я могу использовать параметризованную анимацию с помощью CSS и animate.enter?

Подробнее здесь: https://stackoverflow.com/questions/798 ... angular-21