如何在运行时更改 Angular 动画？

Question

在我的 Angular 组件中，应逐行显示 table，然后等待几秒钟，删除 table 行并显示下一行。到目前为止效果很好。

但是现在我有两个关于动画的“小”问题：

我需要插入一个“等待”（见下面的代码）以确保前面的 :leave 已经完成。否则新行的打印与删除旧行重叠。现在的问题是这个“等待”也适用于第一个运行。如何避免在第一个运行时调用“等待”？或者是否有另一种方法可以确保只有在其他动画完成后才开始新动画（然后我可以删除“等待”）？

这里有一个工作演示 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 }
                ),
            ]),
        ]),
    ]);

如何在运行时间内更改动画？这个想法是创建一堆不同的 :enter 和 :leave 动画，用户可以 select 应用哪一个。但是我没有找到在运行时间内更改动画的方法。

Answer 1

Demo

你可以给动画一个参数。

在您的情况下，您需要将延迟作为参数传递给动画。

为了计算延迟，您需要知道有多少元素正在离开。所以我会在清空数组之前将它存储在一个名为 previousLength 的变量中。

this.previousLength = this.datarows.length;

这就是您通过为动画提供对象来传递参数并计算适当延迟的方式。

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

然后您必须相应地修改动画以实现您的新参数。

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

如何在运行时更改 Angular 动画？

How to change an Angular animation during runtime?

angular

angular-animations