DEV Community

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

Posted on • Edited on • Originally published at Medium

2

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

Image of PulumiUP 2025

From Cloud to Platforms: What Top Engineers Are Doing Differently

Hear insights from industry leaders about the current state and future of cloud and IaC, platform engineering, and security.

Save Your Spot

Top comments (1)

Collapse
 
jangelodev profile image
João Angelo

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