angular 动画随机延迟交错

Question

我正在尝试使用 stagger 闪烁动画在 *ngFor 循环中显示多个 div。为了实现一种故障效果，我希望每个循环之间的交错动画延迟是 0.5s 到 1s 之间的随机数。

 trigger('stagger', [
      transition('* => *', [ 
        query(':enter', [
            style({ opacity: 0 }),
            stagger((Math.random() * (1000 - 500) + 1000), [animate('0.1s', style({ opacity: 1}))])
          ], { optional: true }
        )
      ])
    ]),

那是行不通的。它在所有元素上设置相同的随机延迟。

Answer 1

似乎 angular 动画是不可能的。以任何方式使用动画，你都会为整个组传递交错时间。

如果您可以接受，我会尝试通过在随机延迟后添加新元素，通过多次渲染来实现它

this.data$ = from(data).pipe(
  concatMap((item) => timer(Math.random() * (1000 - 500) + 1000).pipe(map(() => item))),
  scan((a,b) => a.concat(b), [])
);

然后渲染它

<div *ngFor="let item of data$ | async">
...yourtemplate

angular 动画随机延迟交错

angular animation stagger with random delay

animation

typescript

angular