fix(animations): disable whole page slide-in animation in IE & EDGE, …

…adjust styles, fixes #71
tomastrajan · May 29, 2018 · d2c4b8a · d2c4b8a
1 parent 80773bd
commit d2c4b8a
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 42 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "@ngrx/effects": "^6.0.0-beta.1",
     "@ngrx/store": "^6.0.0-beta.1",
     "bootstrap": "^4.0.0",
+    "browser-detect": "^0.2.27",
     "core-js": "^2.4.1",
     "font-awesome": "^4.7.0",
     "rxjs": "^6.0.0",

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -2,14 +2,17 @@
 
 :host {
   height: 100%;
+  width: 100%;
 }
 
 mat-sidenav-container {
   height: 100%;
+  width: 100%;
 
   .wrapper {
     z-index: -2;
     height: 100%;
+    width: 100%;
     display: flex;
     flex-direction: column;
     position: relative;

diff --git a/src/app/core/animations/router.transition.ts b/src/app/core/animations/router.transition.ts
@@ -1,3 +1,4 @@
+import browser from 'browser-detect';
 import {
   animate,
   query,
@@ -10,53 +11,61 @@ import {
 
 export const ANIMATE_ON_ROUTE_ENTER = 'route-enter-staggered';
 
-export const routerTransition = trigger('routerTransition', [
-  transition('* <=> *', [
-    query(':enter > *', style({ opacity: 0, position: 'fixed' }), {
-      optional: true
-    }),
-    query(':enter .' + ANIMATE_ON_ROUTE_ENTER, style({ opacity: 0 }), {
-      optional: true
-    }),
-    sequence([
-      query(
-        ':leave > *',
-        [
-          style({ transform: 'translateY(0%)', opacity: 1 }),
-          animate(
-            '0.2s ease-in-out',
-            style({ transform: 'translateY(-3%)', opacity: 0 })
-          ),
-          style({ position: 'fixed' })
-        ],
-        { optional: true }
-      ),
-      query(
-        ':enter > *',
-        [
-          style({
-            transform: 'translateY(-3%)',
-            opacity: 0,
-            position: 'static'
-          }),
-          animate(
-            '0.5s ease-in-out',
-            style({ transform: 'translateY(0%)', opacity: 1 })
-          )
-        ],
-        { optional: true }
-      )
-    ]),
+const ROUTE_TRANSITION_STEPS: any[] = [
+  query(':enter > *', style({ opacity: 0, position: 'fixed' }), {
+    optional: true
+  }),
+  query(':enter .' + ANIMATE_ON_ROUTE_ENTER, style({ opacity: 0 }), {
+    optional: true
+  }),
+  sequence([
+    query(
+      ':leave > *',
+      [
+        style({ transform: 'translateY(0%)', opacity: 1 }),
+        animate(
+          '0.2s ease-in-out',
+          style({ transform: 'translateY(-3%)', opacity: 0 })
+        ),
+        style({ position: 'fixed' })
+      ],
+      { optional: true }
+    ),
     query(
-      ':enter .' + ANIMATE_ON_ROUTE_ENTER,
-      stagger(100, [
-        style({ transform: 'translateY(15%)', opacity: 0 }),
+      ':enter > *',
+      [
+        style({
+          transform: 'translateY(-3%)',
+          opacity: 0,
+          position: 'static'
+        }),
         animate(
           '0.5s ease-in-out',
           style({ transform: 'translateY(0%)', opacity: 1 })
         )
-      ]),
+      ],
       { optional: true }
     )
-  ])
+  ]),
+  query(
+    ':enter .' + ANIMATE_ON_ROUTE_ENTER,
+    stagger(100, [
+      style({ transform: 'translateY(15%)', opacity: 0 }),
+      animate(
+        '0.5s ease-in-out',
+        style({ transform: 'translateY(0%)', opacity: 1 })
+      )
+    ]),
+    { optional: true }
+  )
+];
+
+// disable whole page slide-in animation in IE and EDGE
+if (['ie', 'edge'].includes(browser().name)) {
+  ROUTE_TRANSITION_STEPS.splice(0, 1);
+  ROUTE_TRANSITION_STEPS.splice(1, 1);
+}
+
+export const routerTransition = trigger('routerTransition', [
+  transition('* <=> *', ROUTE_TRANSITION_STEPS)
 ]);
diff --git a/src/styles-reset.scss b/src/styles-reset.scss
@@ -12,6 +12,7 @@ label {
 html,
 body {
   height: 100%;
+  width: 100%;
 }
 
 code {
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,6 +12,7 @@ label { @@
     html,
     body {
       height: 100%;
+      width: 100%;
     }
     code {
@@ Expand Down @@