How to change an Angular animation during runtime?

问题

In my Angular component a table shall be displayed line by line, then wait few seconds, remove the table lines and show the next lines. That works well so far.

But now I have two "small" issues with the animations:

I need to insert a "wait" (see code below) to ensure that the a previous :leave has been finished. Otherwise printing of new lines are overlapping with removing the old lines. The problem is now that this "wait" also is applied on the very first run. How can I avoid that the "wait" is called on the first run? Or is there another way to ensure that a new animation only starts if other animations have been done (then I could remove that "wait")?

A working demo is here https://stackblitz.com/edit/angular-list-animations-gsfhsv?file=app%2Fapp.component.ts

    import { trigger, transition, style, animate, query, stagger, state, keyframes, group } from '@angular/animations';
    
    export const listAnimation = trigger('listAnimation', [
        transition('* => *', [
            // each time the binding value changes
            group([
                query(
                    ':leave',
                    [
                        stagger(100, [
                            animate('500ms', keyframes([style({ filter: 'blur(12px) opacity(0%)' })])),
                        ]),
                    ],
                    { optional: true }
                ),
                query(
                    ':enter',
                    [
                        style({ opacity: 0, height: 0, visibility: 'hidden' }),
                        stagger(100, [
                            animate('0ms 1200ms', style({})), // <--- wait - otherwise flicker and animations are overlapping
                            style({ height: '*', visibility: 'visible' }),
                            animate('500ms', style({ opacity: 1 })),
                        ]),
                    ],
                    { optional: true }
                ),
            ]),
        ]),
    ]);

How can I change an animation during runtime? The idea is to create a bunch of different :enter and :leave animations and the user can select which one shall be applied. But I didn't found a way to change an animation during runtime.

回答1:

Demo

You can give the animation a parameter.

In your case, you need to pass the delay as a parameter to the animation.

In order to calculate the delay, you need to know how many elements are leaving. So I will store it in a variable called previousLength just before I empty the array.

this.previousLength = this.datarows.length;

This is how you pass a parameter and calculate the appropriate delay, by giving an object to the animation.

[@listAnimation]="{value: datarows.length, params:{delay: previousLength * 100 + 500}}"

You then have to modify the animation accordingly to implement your new parameter.

animate("0ms {{delay}}ms", style({})),

来源：https://stackoverflow.com/questions/65614444/how-to-change-an-angular-animation-during-runtime

标签

angular

angular-animations