From 54a035326b9ad0925302436296baed05715102bc Mon Sep 17 00:00:00 2001 From: Svyatoslav Zaytsev Date: Wed, 2 Oct 2024 16:18:01 +0500 Subject: [PATCH] feat(core): add animation params --- projects/core/animations/animations.ts | 183 +++++++++++++------------ 1 file changed, 96 insertions(+), 87 deletions(-) diff --git a/projects/core/animations/animations.ts b/projects/core/animations/animations.ts index 1b3f519b7a6b..0212ae43c74c 100644 --- a/projects/core/animations/animations.ts +++ b/projects/core/animations/animations.ts @@ -167,18 +167,21 @@ export const tuiFadeInTop = trigger('tuiFadeInTop', [ transition( ':enter', [ - style({transform: 'translateY(-10px)', opacity: 0}), - animate(TRANSITION, style({transform: 'translateY(0)', opacity: 1})), + style({transform: 'translateY(-{{start}}px)', opacity: 0}), + animate(TRANSITION, style({transform: 'translateY({{end}})', opacity: 1})), ], - DURATION, + {params: {end: 0, start: 10, duration: 300}}, ), transition( ':leave', [ - style({transform: 'translateY(0)', opacity: 1}), - animate(TRANSITION, style({transform: 'translateY(-10px)', opacity: 0})), + style({transform: 'translateY({{end}})', opacity: 1}), + animate( + TRANSITION, + style({transform: 'translateY(-{{start}}px)', opacity: 0}), + ), ], - DURATION, + {params: {end: 0, start: 10, duration: 300}}, ), ]); @@ -186,18 +189,21 @@ export const tuiFadeInBottom = trigger('tuiFadeInBottom', [ transition( ':enter', [ - style({transform: 'translateY(10px)', opacity: 0}), - animate(TRANSITION, style({transform: 'translateY(0)', opacity: 1})), + style({transform: 'translateY({{start}}px)', opacity: 0}), + animate(TRANSITION, style({transform: 'translateY({{end}})', opacity: 1})), ], - DURATION, + {params: {end: 0, start: 10, duration: 300}}, ), transition( ':leave', [ - style({transform: 'translateY(0)', opacity: 1}), - animate(TRANSITION, style({transform: 'translateY(10px)', opacity: 0})), + style({transform: 'translateY({{end}})', opacity: 1}), + animate( + TRANSITION, + style({transform: 'translateY({{start}}px)', opacity: 0}), + ), ], - DURATION, + {params: {end: 0, start: 10, duration: 300}}, ), ]); @@ -205,18 +211,21 @@ export const tuiDropdownAnimation = trigger('tuiDropdownAnimation', [ transition( ':enter', [ - style({transform: 'translateY(-10px)', opacity: 0}), - animate(TRANSITION, style({transform: 'translateY(0)', opacity: 1})), + style({transform: 'translateY(-{{start}}px)', opacity: 0}), + animate(TRANSITION, style({transform: 'translateY({{end}})', opacity: 1})), ], - DURATION, + {params: {end: 0, start: 10, duration: 300}}, ), transition( ':leave', [ - style({transform: 'translateY(0)', opacity: 1}), - animate(TRANSITION, style({transform: 'translateY(-10px)', opacity: 0})), + style({transform: 'translateY({{end}})', opacity: 1}), + animate( + TRANSITION, + style({transform: 'translateY(-{{start}}px)', opacity: 0}), + ), ], - DURATION, + {params: {end: 0, start: 10, duration: 300}}, ), ]); @@ -224,18 +233,18 @@ export const tuiScaleIn = trigger('tuiScaleIn', [ transition( ':enter', [ - style({transform: 'scale(0)'}), - animate(TRANSITION, style({transform: 'scale(1)'})), + style({transform: 'scale({{start}})'}), + animate(TRANSITION, style({transform: 'scale({{end}})'})), ], - DURATION, + {params: {end: 1, start: 0, duration: 300}}, ), transition( ':leave', [ - style({transform: 'scale(1)'}), - animate(TRANSITION, style({transform: 'scale(0)'})), + style({transform: 'scale({{end}})'}), + animate(TRANSITION, style({transform: 'scale({{start}})'})), ], - DURATION, + {params: {end: 1, start: 0, duration: 300}}, ), ]); @@ -243,20 +252,20 @@ export const tuiPop = trigger('tuiPop', [ transition( ':enter', [ - style({transform: 'scale(0)'}), - animate(TRANSITION, style({transform: 'scale(1.1)'})), - animate(TRANSITION, style({transform: 'scale(1)'})), + style({transform: 'scale({{start}})'}), + animate(TRANSITION, style({transform: 'scale({{middle}})'})), + animate(TRANSITION, style({transform: 'scale({{end}})'})), ], - DURATION, + {params: {end: 1, middle: 1.1, start: 0, duration: 300}}, ), transition( ':leave', [ - style({transform: 'scale(1)'}), - animate(TRANSITION, style({transform: 'scale(1.1)'})), - animate(TRANSITION, style({transform: 'scale(0)'})), + style({transform: 'scale({{end}})'}), + animate(TRANSITION, style({transform: 'scale({{middle}})'})), + animate(TRANSITION, style({transform: 'scale({{start}})'})), ], - DURATION, + {params: {end: 1, middle: 1.1, start: 0, duration: 300}}, ), ]); @@ -267,9 +276,9 @@ export const tuiScaleInList = trigger('tuiScaleInList', [ query( ':enter', [ - style({transform: 'scale(0)'}), + style({transform: 'scale({{start}})'}), stagger(STAGGER, [ - animate(TRANSITION, style({transform: 'scale(1)'})), + animate(TRANSITION, style({transform: 'scale({{end}})'})), ]), ], {optional: true}, @@ -277,15 +286,15 @@ export const tuiScaleInList = trigger('tuiScaleInList', [ query( ':leave', [ - style({transform: 'scale(1)'}), + style({transform: 'scale({{end}})'}), stagger(STAGGER, [ - animate(TRANSITION, style({transform: 'scale(0)'})), + animate(TRANSITION, style({transform: 'scale({{start}})'})), ]), ], {optional: true}, ), ], - DURATION, + {params: {end: 1, start: 0, duration: 300}}, ), ]); @@ -293,34 +302,34 @@ export const tuiSlideIn = trigger('tuiSlideIn', [ transition( '* => left', [ - style({transform: 'translateX(-100%)'}), - animate(TRANSITION, style({transform: 'translateX(0)'})), + style({transform: 'translateX(-{{start}})'}), + animate(TRANSITION, style({transform: 'translateX({{end}})'})), ], - DURATION, + {params: {end: 0, start: '100%', duration: 300}}, ), transition( 'left => *', [ - style({transform: 'translateX(0)'}), - animate(TRANSITION, style({transform: 'translateX(-100%)'})), + style({transform: 'translateX({{end}})'}), + animate(TRANSITION, style({transform: 'translateX(-{{start}})'})), ], - DURATION, + {params: {end: 0, start: '100%', duration: 300}}, ), transition( '* => right', [ - style({transform: 'translateX(100%)'}), - animate(TRANSITION, style({transform: 'translateX(0)'})), + style({transform: 'translateX({{start}})'}), + animate(TRANSITION, style({transform: 'translateX({{end}})'})), ], - DURATION, + {params: {end: 0, start: '100%', duration: 300}}, ), transition( 'right => *', [ - style({transform: 'translateX(0)'}), - animate(TRANSITION, style({transform: 'translateX(100%)'})), + style({transform: 'translateX({{end}})'}), + animate(TRANSITION, style({transform: 'translateX({{start}})'})), ], - DURATION, + {params: {end: 0, start: '100%', duration: 300}}, ), ]); @@ -328,18 +337,18 @@ export const tuiSlideInLeft = trigger('tuiSlideInLeft', [ transition( ':enter', [ - style({transform: 'translateX(-100%)'}), - animate(TRANSITION, style({transform: 'translateX(0)'})), + style({transform: 'translateX(-{{start}})'}), + animate(TRANSITION, style({transform: 'translateX({{end}})'})), ], - DURATION, + {params: {end: 0, start: '100%', duration: 300}}, ), transition( ':leave', [ - style({transform: 'translateX(0)'}), - animate(TRANSITION, style({transform: 'translateX(-100%)'})), + style({transform: 'translateX({{end}})'}), + animate(TRANSITION, style({transform: 'translateX(-{{start}})'})), ], - DURATION, + {params: {end: 0, start: '100%', duration: 300}}, ), ]); @@ -350,9 +359,9 @@ export const tuiSlideInLeftList = trigger('tuiSlideInLeftList', [ query( ':enter', [ - style({transform: 'translateX(-100%)'}), + style({transform: 'translateX(-{{start}})'}), stagger(STAGGER, [ - animate(TRANSITION, style({transform: 'translateX(0)'})), + animate(TRANSITION, style({transform: 'translateX({{end}})'})), ]), ], {optional: true}, @@ -360,15 +369,15 @@ export const tuiSlideInLeftList = trigger('tuiSlideInLeftList', [ query( ':leave', [ - style({transform: 'translateX(0)'}), + style({transform: 'translateX({{end}})'}), stagger(STAGGER, [ - animate(TRANSITION, style({transform: 'translateX(-100%)'})), + animate(TRANSITION, style({transform: 'translateX(-{{start}})'})), ]), ], {optional: true}, ), ], - DURATION, + {params: {end: 0, start: '100%', duration: 300}}, ), ]); @@ -376,18 +385,18 @@ export const tuiSlideInRight = trigger('tuiSlideInRight', [ transition( ':enter', [ - style({transform: 'translateX(100%)'}), - animate(TRANSITION, style({transform: 'translateX(0)'})), + style({transform: 'translateX({{start}})'}), + animate(TRANSITION, style({transform: 'translateX({{end}})'})), ], - DURATION, + {params: {end: 0, start: '100%', duration: 300}}, ), transition( ':leave', [ - style({transform: 'translateX(0)'}), - animate(TRANSITION, style({transform: 'translateX(100%)'})), + style({transform: 'translateX({{end}})'}), + animate(TRANSITION, style({transform: 'translateX({{start}})'})), ], - DURATION, + {params: {end: 0, start: '100%', duration: 300}}, ), ]); @@ -398,9 +407,9 @@ export const tuiSlideInRightList = trigger('tuiSlideInRightList', [ query( ':enter', [ - style({transform: 'translateX(100%)'}), + style({transform: 'translateX({{start}})'}), stagger(STAGGER, [ - animate(TRANSITION, style({transform: 'translateX(0)'})), + animate(TRANSITION, style({transform: 'translateX({{end}})'})), ]), ], {optional: true}, @@ -408,15 +417,15 @@ export const tuiSlideInRightList = trigger('tuiSlideInRightList', [ query( ':leave', [ - style({transform: 'translateX(0)'}), + style({transform: 'translateX({{end}})'}), stagger(STAGGER, [ - animate(TRANSITION, style({transform: 'translateX(100%)'})), + animate(TRANSITION, style({transform: 'translateX({{start}})'})), ]), ], {optional: true}, ), ], - DURATION, + {params: {end: 0, start: '100%', duration: 300}}, ), ]); @@ -446,9 +455,9 @@ export const tuiSlideInTopList = trigger('tuiSlideInTopList', [ query( ':enter', [ - style({transform: 'translateY(100%)'}), + style({transform: 'translateY({{start}})'}), stagger(STAGGER, [ - animate(TRANSITION, style({transform: 'translateY(0)'})), + animate(TRANSITION, style({transform: 'translateY({{end}})'})), ]), ], {optional: true}, @@ -456,15 +465,15 @@ export const tuiSlideInTopList = trigger('tuiSlideInTopList', [ query( ':leave', [ - style({transform: 'translateY(0)'}), + style({transform: 'translateY({{end}})'}), stagger(STAGGER, [ - animate(TRANSITION, style({transform: 'translateY(100%)'})), + animate(TRANSITION, style({transform: 'translateY({{start}})'})), ]), ], {optional: true}, ), ], - DURATION, + {params: {end: 0, start: '100%', duration: 300}}, ), ]); @@ -472,18 +481,18 @@ export const tuiSlideInBottom = trigger('tuiSlideInBottom', [ transition( ':enter', [ - style({transform: 'translateY(-100%)'}), - animate(TRANSITION, style({transform: 'translateY(0)'})), + style({transform: 'translateY(-{{start}})'}), + animate(TRANSITION, style({transform: 'translateY({{end}})'})), ], - DURATION, + {params: {end: 0, start: '100%', duration: 300}}, ), transition( ':leave', [ - style({transform: 'translateY(0)'}), - animate(TRANSITION, style({transform: 'translateY(-100%)'})), + style({transform: 'translateY({{end}})'}), + animate(TRANSITION, style({transform: 'translateY(-{{start}})'})), ], - DURATION, + {params: {end: 0, start: '100%', duration: 300}}, ), ]); @@ -494,9 +503,9 @@ export const tuiSlideInBottomList = trigger('tuiSlideInBottomList', [ query( ':enter', [ - style({transform: 'translateY(-100%)'}), + style({transform: 'translateY(-{{start}})'}), stagger(STAGGER, [ - animate(TRANSITION, style({transform: 'translateY(0)'})), + animate(TRANSITION, style({transform: 'translateY({{end}})'})), ]), ], {optional: true}, @@ -504,14 +513,14 @@ export const tuiSlideInBottomList = trigger('tuiSlideInBottomList', [ query( ':leave', [ - style({transform: 'translateY(0)'}), + style({transform: 'translateY({{end}})'}), stagger(STAGGER, [ - animate(TRANSITION, style({transform: 'translateY(-100%)'})), + animate(TRANSITION, style({transform: 'translateY(-{{start}})'})), ]), ], {optional: true}, ), ], - DURATION, + {params: {end: 0, start: '100%', duration: 300}}, ), ]);