How to pass a parameter to animation step functions?

Question

I deconstructed an animation function into parts in the idea for them to be reusable:

const enterLeaveAnimation = (
  triggerName: string,
  step1: AnimationMetadata | AnimationMetadata[],
  step2: AnimationMetadata | AnimationMetadata[]
) =>
trigger(triggerName, [
  transition(':enter', step1, { params: { delay: 0 } }),
  transition(':leave', step2, { params: { delay: 0 } })
])

const fadeEnter = [style({ opacity: 0 }), animate('600ms {{delay}}ms ease', style({ opacity: 1 }))]
const fadeLeave = [animate('600ms {{delay}}ms ease', style({ opacity: 0 }))]

const fadeAnimation = enterLeaveAnimation('fade', fadeEnter, fadeLeave);

enterLeaveAnimation is implemented as usual:

...
animations: [fadeAnimation],

and in the template:

...

Everything seems to work as expected. The proof is in the demo.

However, I am unable to pass any delay value, which take 0 defined by default.

I tried:

...[@fade]="{value:true,params: {delay: 200}}"

that do not work and I don't know how to receive delay in the animation functions fadeEnter and fadeLeave.

The demo of this attempt.

Also, my goal is to use two different delay values for each of steps. But first, I need to pass at lease one value.

How it could be done?

user_13603485 · Answer

The params should be added to the steps. It still will be set with default values, but it can also be received from the trigger:

const enterLeaveAnimation = (triggerName: string, step1: AnimationMetadata | AnimationMetadata[],
    step2: AnimationMetadata | AnimationMetadata[], params?: AnimationOptions | null | undefined
) =>
    trigger(triggerName, [
        transition(':enter', step1, params),
        transition(':leave', step2, params)
    ])

const fadeEnter = animation([style({ opacity: 0 }), animate('600ms {{delay1}}ms ease-out', style({ opacity: 1 }))], { params: { delay1: 0 } })
const fadeLeave = animation([animate('600ms {{delay2}}ms ease', style({ opacity: 0 }))], { params: { delay2: 0 } })

Usage:

...[@fade]="{value:true,params: {delay1: 200, delay2: 300}}"

How to pass a parameter to animation step functions?

1 Answers