From bb6462e2c2dc8957a458ddf1e3a2bed5799b4530 Mon Sep 17 00:00:00 2001 From: TheDiaval Date: Tue, 1 Oct 2019 16:06:20 +0300 Subject: [PATCH 1/2] refactor(theme-shared): change collapse and fade animations --- .../src/lib/animations/collapse.animations.ts | 53 +++++++++++++------ .../src/lib/animations/fade.animations.ts | 30 +++++------ 2 files changed, 50 insertions(+), 33 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/animations/collapse.animations.ts b/npm/ng-packs/packages/theme-shared/src/lib/animations/collapse.animations.ts index af71b948df..ad6cf81e70 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/animations/collapse.animations.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/animations/collapse.animations.ts @@ -1,19 +1,40 @@ -import { trigger, state, style, transition, animate } from '@angular/animations'; +import { animate, animation, trigger, state, style, transition, useAnimation } from '@angular/animations'; + +export const collapseY = animation( + [ + style({ height: '*', overflow: 'hidden', 'box-sizing': 'border-box' }), + animate('{{ time }} {{ easing }}', style({ height: '0', padding: '0px' })) + ], + { params: { time: '350ms', easing: 'ease' } } +); + +export const collapseX = animation( + [ + style({ width: '*', overflow: 'hidden', 'box-sizing': 'border-box' }), + animate('{{ time }} {{ easing }}', style({ width: '0', padding: '0px' })) + ], + { params: { time: '350ms', easing: 'ease' } } +); + +export const expandY = animation( + [ + style({ height: '0', overflow: 'hidden', 'box-sizing': 'border-box' }), + animate('{{ time }} {{ easing }}', style({ height: '*', padding: '*' })) + ], + { params: { time: '350ms', easing: 'ease' } } +); + +export const expandX = animation( + [ + style({ width: '0', overflow: 'hidden', 'box-sizing': 'border-box' }), + animate('{{ time }} {{ easing }}', style({ width: '*', padding: '*' })) + ], + { params: { time: '350ms', easing: 'ease' } } +); export const collapse = trigger('collapse', [ - state( - 'open', - style({ - height: '*', - overflow: 'hidden' - }) - ), - state( - 'close', - style({ - height: '0px', - overflow: 'hidden' - }) - ), - transition('open <=> close', animate('{{duration}}ms'), { params: { duration: '350' } }) + state('collapsed', style({ height: '0', overflow: 'hidden' })), + state('expanded', style({ height: '*', overflow: 'hidden' })), + transition('expanded => collapsed', useAnimation(collapseY)), + transition('collapsed => expanded', useAnimation(expandY)) ]); diff --git a/npm/ng-packs/packages/theme-shared/src/lib/animations/fade.animations.ts b/npm/ng-packs/packages/theme-shared/src/lib/animations/fade.animations.ts index fb523e0d56..60be602291 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/animations/fade.animations.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/animations/fade.animations.ts @@ -1,19 +1,15 @@ -import { animate, state, style, transition, trigger } from '@angular/animations'; +import { animate, animation, style } from '@angular/animations'; -export const fade = trigger('fade', [ - state('void', style({ opacity: 1 })), - transition(':enter', [style({ opacity: 0 }), animate(250)]), - transition(':leave', animate(250, style({ opacity: 0 }))), -]); +export const fadeIn = animation( + [style({ opacity: '0', display: '{{ display }}' }), animate('{{ time}} {{ easing }}', style({ opacity: '1' }))], + { params: { time: '350ms', easing: 'ease', display: 'block' } } +); -export const fadeWithStates = trigger('fadeInOut', [ - state('out', style({ opacity: 0 })), - state('in', style({ opacity: 1 })), - transition('in <=> out', [animate(250)]), -]); - -export const fadeIn = trigger('fadeIn', [ - state('*', style({ opacity: 1 })), - transition('* => *', [style({ opacity: 0 }), animate(250)]), - transition(':enter', [style({ opacity: 0 }), animate(250)]), -]); +export const fadeOut = animation( + [ + style({ opacity: '1' }), + animate('{{ time}} {{ easing }}', style({ opacity: '0' })), + style({ opacity: '0', display: 'none' }) + ], + { params: { time: '350ms', easing: 'ease' } } +); From 40513fbd1b06d176a5a1741dea57067820b8e3a3 Mon Sep 17 00:00:00 2001 From: TheDiaval Date: Tue, 1 Oct 2019 16:06:47 +0300 Subject: [PATCH 2/2] feature(theme-shared): add bounceIn animation --- .../src/lib/animations/bounce.animations.ts | 23 +++++++++++++++++++ .../theme-shared/src/lib/animations/index.ts | 1 + 2 files changed, 24 insertions(+) create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/animations/bounce.animations.ts diff --git a/npm/ng-packs/packages/theme-shared/src/lib/animations/bounce.animations.ts b/npm/ng-packs/packages/theme-shared/src/lib/animations/bounce.animations.ts new file mode 100644 index 0000000000..ccdc62c491 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/animations/bounce.animations.ts @@ -0,0 +1,23 @@ +import { animation, animate, style, trigger, transition, state, useAnimation, keyframes } from '@angular/animations'; + +export const bounceIn = animation( + [ + style({ opacity: '0', display: '{{ display }}' }), + animate( + '{{ time}} {{ easing }}', + keyframes([ + style({ opacity: '0', transform: '{{ transform }} scale(0.0)', offset: 0 }), + style({ opacity: '0', transform: '{{ transform }} scale(0.8)', offset: 0.5 }), + style({ opacity: '1', transform: '{{ transform }} scale(1.0)', offset: 1 }) + ]) + ) + ], + { + params: { + time: '350ms', + easing: 'cubic-bezier(.7,.31,.72,1.47)', + display: 'block', + transform: 'translate(-50%, -50%)' + } + } +); diff --git a/npm/ng-packs/packages/theme-shared/src/lib/animations/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/animations/index.ts index 50772ccedc..5a7009be17 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/animations/index.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/animations/index.ts @@ -1,3 +1,4 @@ export * from './collapse.animations'; export * from './fade.animations'; export * from './slide.animations'; +export * from './bounce.animations';