How we use Angular animation

We are used to creating Angular animations with explicitly specified styles, disregarding the fact that the final animation can differ on a case-by-case basis, and duplicate, essentially identical animations need to be created.

For example, N-block unfolding animations with different animation times

const closedStyle = style({ height: 0 });
const openStyle = style({ height: '*' }); 
const slowAnimateTimings = '800ms linear';

export const collapseSlow = trigger(
  'collapseSlow', 
  [
    transition(':enter', [closedStyle, animate(slowAnimateTimings, openStyle)]),
    transition(':leave', [openStyle, animate(slowAnimateTimings, closedStyle)]),
  ]
);

const fastAnimateTimings = '200ms linear';
export const collapseFast = trigger(
  'collapseFast', 
  [
    transition(':enter', [closedStyle, animate(fastAnimateTimings, openStyle)]),
    transition(':leave', [openStyle, animate(fastAnimateTimings, closedStyle)]),
  ]
);

Obviously, these animations do the same thing, and we need to optimize this code — eliminate duplicate animation styles and hardcode timing of animation.

Yes, you could resort to creating a HoС-function with parameter passing, but it’s unnecessary because Angular has all the functionality you need read more...