DEV Community

Cover image for Customizable Angular animations from Component
Maksim Dolgih
Maksim Dolgih

Posted on • Updated on • Originally published at Medium

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

Enter fullscreen mode Exit fullscreen mode

Showcase for Angular animations  raw `collapseSlow` endraw  and  raw `collapseFast` endraw

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

Top comments (1)

Collapse
 
jangelodev profile image
João Angelo

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