Customizable Angular animations from Component

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)]),
  ]
);

GIF

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...

Comments

[João Angelo]

Maksim Dolgih,
Great article, very useful!
Thanks for sharing...