By breaking down an animation function into reusable parts, I created the following structure:
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);
The function enterLeaveAnimation is then used as follows:
...
animations: [fadeAnimation],
And in the template:
<p @fade *ngIf="visible">
...
Everything appears to be functioning correctly. A working demo can be found here.
However, setting a custom delay value seems to be an issue, as it defaults to 0.
I have attempted different approaches, like:
...[@fade]="{value:true,params: {delay: 200}}"
Unfortunately, these attempts are unsuccessful and I am unsure how to pass the delay parameter to the animations fadeEnter and fadeLeave.
You can see another demo of this attempt here.
My ultimate goal is to have separate delay values for each step, but for now, I am focused on passing at least one value successfully.
Is there a way to achieve this?