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...
Top comments (1)
Maksim Dolgih,
Great article, very useful!
Thanks for sharing...