0

Okay we have an animation which looks like this:

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

As you can see I am passing parameter timing to animate function but in the query(':leave) section want 0.6 instead of 0.5 so something like this 

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

But unfortunately angular throws error 'The provided timing value is invalid.'

Note: I don't want to provide timing separately for each query.

Is any workaround for this ?

Stackblitz: Demo Link

Thanks in advance.

Vugar Abdullayev
  • 1,852
  • 3
  • 21
  • 46

1 Answers1

0

You can't do operations between {{ }}.

Instead you can simply declare a variable timing :

let timing = 0.5;

and use it like this :

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

I hope this solution suits you.

Zak
  • 1,005
  • 10
  • 22