ARTICLE AD BOX
I'm currently migrating my projects from @angular/animations to CSS animations because the animations library is deprecated and going to be removed in Angular 23.
Migrating animations to CSS animations and animate.enter seems to be easy for now. But now I'm facing this animation that I want to migrate to 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')), ]),As you can see in this animation I use a parameter {{width}} that describes the width of a sidebar. The animation is applied to that sidebar. Imagine a page with a sidebar on the left and content on the right. As soon as the animation starts the sidebar expands to the full width (100%) and the content area vanishes. If the status is "closed" it does the opposite and decreases the sidebar with to the value of the paramater {{width}}
How can I use parameterized animations with CSS and animate.enter?
