角度动画错开动态延迟

Question

我正在尝试使用动画参数设置交错延迟

我试过了

export const ENTER_SEQUENCE: any[] = [
animation(
query(':enter .word', [
stagger('{{delay}}', [
useAnimation(bounce)
])
], {
optional: true
}),
{
params: {
delay: DEFAULT_DELAY,
}
}
)
];

模板

<span [@startWordSeq]="{ value: swicher, params: { delay: 500 } }" aria-label="text">

我收到错误

AppComponent.html：2 错误错误：由于以下错误，动画触发器"startWordSeq"无法生成： - 提供的计时值"{{ 延迟 }}"无效。

我想访问与以下截图代码相同的参数变量：

export const bounceIn = animation(
animate(
'{{ timing }}s {{ delay }}s cubic-bezier(0.215, 0.610, 0.355, 1.000)',
keyframes([
style({ opacity: 0, transform: 'scale3d(.3, .3, .3)', offset: 0 }),
style({ transform: 'scale3d(1.1, 1.1, 1.1)', offset: 0.2 }),
style({ transform: 'scale3d(.9, .9, .9)', offset: 0.4 }),
style({
opacity: 1,
transform: 'scale3d(1.03, 1.03, 1.03)',
offset: 0.6
}),
style({ transform: 'scale3d(.97, .97, .97)', offset: 0.8 }),
style({ opacity: 1, transform: 'scale3d(1, 1, 1)', offset: 1 })
])
),
{ params: { timing: 100, delay: 0 } }
);

Answer 1

交错值是静态的。 如果要设置动态延迟

trigger('timeBarTrigger', [
transition('* => inactive', [
query(':self', style({ width: '100%' })),
]),
transition('* => active', [
// animate ('duration delay easing')
query(':self', animate('{{duration}}ms {{timebarDelayTime}}ms linear', style({width: '0%'}))),
], {params : { duration: 20000, timebarDelayTime: 5000 }})
])