1 files changed, 66 insertions, 0 deletions
diff --git a/public/src/app/router.animations.ts b/public/src/app/router.animations.ts
new file mode 100644
index 0000000..072c031
--- /dev/null
+++ b/public/src/app/router.animations.ts
@@ -0,0 +1,66 @@
+import {
+  trigger,
+  state,
+  animate,
+  transition,
+  style,
+  query
+} from '@angular/animations';
+
+export const fadeAnimation = trigger('fadeAnimation', [
+  transition('* => *', [
+    query(':enter', [style({ opacity: 0 })], { optional: true }),
+
+    query(
+      ':leave',
+      [style({ opacity: 1 }), animate('0.5s', style({ opacity: 0 }))],
+      { optional: true }
+    ),
+
+    query(
+      ':enter',
+      [style({ opacity: 0 }), animate('0.5s', style({ opacity: 1 }))],
+      { optional: true }
+    )
+  ])
+]);
+
+export const slideAnimation = trigger('slideAnimation', [
+  transition('* <=> *', [
+    // Initial state of new route
+    query(
+      ':enter',
+      style({
+        position: 'fixed',
+        width: '100%',
+        transform: 'translateX(-100%)'
+      }),
+      { optional: true }
+    ),
+    // move page off screen right on leave
+    // query(
+    //   ':leave',
+    //   animate(
+    //     '500ms ease',
+    //     style({
+    //       position: 'fixed',
+    //       width: '100%',
+    //       transform: 'translateX(-100%)'
+    //     })
+    //   ),
+    //   { optional: true }
+    // ),
+    // move page in screen from left to right
+    query(
+      ':enter',
+      animate(
+        '500ms ease',
+        style({
+          opacity: 1,
+          transform: 'translateX(0%)'
+        })
+      ),
+      { optional: true }
+    )
+  ])
+]);