Merge pull request #1829 from abpframework/refactor/ng-animations

Refactor/ng animations

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%)'
+    }
+  }
+);

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

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' } }
+);

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';