Question

好的，我们有一个看起来像这样的动画：

export const scaleDownLeft = animation( [
    query(':enter, :leave', style(sharedStyles)
        , { optional: true }),
        group([
          query(':enter', [
            animate('{{timing}}s {{delay}}s ease-in', keyframes([
             style({transform: 'translateX(-100%)', offset: 0}),
             style( { transform: 'translateX(0%)', offset: 1})
            ])
            )
          ], { optional: true }),
            query(':leave', [
            animate('{{timing}}s {{delay}}s ease-in', keyframes([
              style({ opacity: '1', transform: 'scale(1)', offset: 0}),
              style({ opacity: '0', transform: 'scale(0.8)', offset: 1})
            ]))
          ], { optional: true }),
        ]),
    ], {params: {timing: '0.5', delay: '0'}});

如您所见，我正在将参数计时传递给动画函数，但是在query（'：leave）部分中希望将0.6而不是0.5变为

animate('{{timing + 0.1}}s {{delay}}s ease-in'

但是不幸的是角度抛出错误'提供的计时值无效。'

注意：我不想为每个查询分别提供计时。

有什么解决方法吗？

Stackblitz：Demo Link

谢谢。

Answer 1

您不能在{{}}之间进行操作。

相反，您只需声明一个变量 timing ：

let timing = 0.5;

并像这样使用它：

animate(timing + 0.1 + 's {{delay}}s ease-in', keyframes([

我希望这种解决方案适合您。

如何操作“角度动画”参数？

1 个答案: