如何在运行时更改Angular动画? [英] How to change an Angular animation during runtime?

问题描述

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

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:

1. 我需要插入"wait"(请参见下面的代码)，以确保之前的:leave 已完成.否则，打印新行与删除旧行重叠.现在的问题是，这种等待"需要等待.也适用于第一轮.我如何避免等待"?第一次运行被称为?还是有另一种方法来确保只有在其他动画完成后才开始播放新动画(然后我可以删除该等待")?

1. 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")?

此处是一个有效的演示 https://stackblitz.com/edit/angular-list-animations-gsfhsv?file=app%2Fapp.component.ts

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

1. 如何在运行时更改动画?这个想法是创建一堆不同的:enter 和:leave 动画，用户可以选择应使用哪个动画.但是我没有找到在运行时更改动画的方法.

1. 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.

推荐答案

演示

您可以为动画设置参数.

You can give the animation a parameter.

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

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

为了计算延迟，您需要知道要剩下多少个元素.因此，在清空数组之前，我会将其存储在名为 previousLength 的变量中.

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({})),

这篇关于如何在运行时更改Angular动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！