如何操纵角动画参数？

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'}});

正如你可以看到我传递参数定时动画功能，但在查询（'：离开）部分要0.6而不是0.5，这样的事情

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

但不幸的是角引发错误“所提供的定时值是无效的。”

注：我不想为每个查询单独提供定时。

是这个什么解决办法？

Stackblitz：Demo Link

提前致谢。

Answer 1

你不能做之​​间的操作{{}}。

相反，你可以简单地声明一个变量时间：

let timing = 0.5;

并使用它像这样：

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

我希望这个解决方案适合你。