具有随机延迟的角度动画交错

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

角度动画似乎不可能做到这一点。在任何使用动画的方式中，你都会为整个团队传递交错时间。

如果它对你来说是可以接受的，我会尝试用几个渲染来实现它，在随机延迟之后添加新元素

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