refactor(theme-shared): change collapse and fade animations

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