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”未能生成： -提供的计时值“ {{delay}}”无效。

我要访问与以下snipped code相同的param变量：

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

角度动画错开动态延迟

1 个答案: