Add .ng-leave and .ng-enter rulesets for page transition

Adding ngAnimation dependency created added animation to pages during
route or location changes. Added transitions to create an elegant
transition.

Tested: I navigated to every page including logging in
and out in Chrome, Firefox and Safari to assure all
browsers handle the transition consistently.

Resolves openbmc/phosphor-webui#86

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I14fa1bd790e80f977b7a0ccceccc3eb20ce33ae6

3 files changed, 91 insertions, 38 deletions

diff --git a/app/common/styles/base/mixins.scss b/app/common/styles/base/mixins.scss
index e95d949..ead5924 100644
--- a/app/common/styles/base/mixins.scss
+++ b/app/common/styles/base/mixins.scss
@@ -1,24 +1,29 @@
 //Breakpoints mixin
 @mixin mediaQuery($breakpoint) {
   @if $breakpoint == "x-small" {
-    @media (min-width: 25.000em) { //400px
+    @media (min-width: 25em) {
+      //400px
       @content;
     }
   }
   @if $breakpoint == "small" {
-    @media (min-width: 47.938em) { //767px
+    @media (min-width: 47.938em) {
+      //767px
       @content;
     }
   } @else if $breakpoint == "medium" {
-    @media (min-width: 64.000em) { //1024px
+    @media (min-width: 64em) {
+      //1024px
       @content;
     }
   } @else if $breakpoint == "large" {
-    @media (min-width: 85.375em) { //1366px
+    @media (min-width: 85.375em) {
+      //1366px
       @content;
     }
   } @else if $breakpoint == "x-large" {
-    @media (min-width: 100.000em) { //1600px
+    @media (min-width: 100em) {
+      //1600px
       @content;
     }
   }
@@ -40,23 +45,31 @@
   font-weight: 700;
 }
 
-
 //Transitions mixin
 @mixin fastTransition-all {
-  transition: all .5s ease;
+  transition: all 0.5s ease;
 }
 
 @mixin slowTransition-all {
   transition: all 1.5s ease;
 }
 
+@mixin page-transition {
+  transition: 110ms cubic-bezier(0.4, 0.14, 1, 1);
+}
+
+@mixin page-transition-visibility {
+  visibility: hidden;
+  opacity: 0;
+}
+
 //Custom SVG arrow
 @mixin bgImage__arrowDown-primary {
   background-image: url(../assets/images/icon-caret-down.svg);
   background-size: 0.8em;
   background-repeat: no-repeat;
   background-position-y: center;
-  background-position-x: calc(100% - .5em);
+  background-position-x: calc(100% - 0.5em);
 }
 
 @mixin bgImage__arrowDown-disabled {
@@ -64,23 +77,23 @@
   background-size: 0.8em;
   background-repeat: no-repeat;
   background-position-y: center;
-  background-position-x: calc(100% - .5em);
+  background-position-x: calc(100% - 0.5em);
 }
 
 @mixin calcColumn-5 {
-  min-width: calc(100% * (1/5) - 5px);
+  min-width: calc(100% * (1 / 5) - 5px);
 }
 
-@mixin calcColumn-4 ($offset: 0) {
-  min-width: calc(100% * (1/4) - #{$offset});
+@mixin calcColumn-4($offset: 0) {
+  min-width: calc(100% * (1 / 4) - #{$offset});
 }
 
 @mixin calcColumn-3 {
-  min-width: calc(100% * (1/3) - 5px);
+  min-width: calc(100% * (1 / 3) - 5px);
 }
 
 @mixin calcSplitColumn {
-  min-width: calc(100% * (1/2) - 5px);
+  min-width: calc(100% * (1 / 2) - 5px);
 }
 
 @mixin vertCenter {
@@ -89,7 +102,13 @@
 }
 
 @mixin indeterminate-bar {
-  background-image: repeating-linear-gradient(-45deg, rgba(251, 234, 174, 0.35), rgba(251, 234, 174, 0.35) 25px, rgba(244, 176, 0, 0.45) 25px, rgba(244, 176, 0, 0.45) 50px);
+  background-image: repeating-linear-gradient(
+    -45deg,
+    rgba(251, 234, 174, 0.35),
+    rgba(251, 234, 174, 0.35) 25px,
+    rgba(244, 176, 0, 0.45) 25px,
+    rgba(244, 176, 0, 0.45) 50px
+  );
   -webkit-animation: progress 2s linear infinite;
   -moz-animation: progress 2s linear infinite;
   animation: progress 2s linear infinite;
@@ -134,25 +153,41 @@
 
 @mixin table-row-save {
   @-webkit-keyframes row-flash {
-    from { background-color: $lightblue; }
-    to { background-color: inherit; }
+    from {
+      background-color: $lightblue;
+    }
+    to {
+      background-color: inherit;
+    }
   }
   @-moz-keyframes row-flash {
-    from { background-color: $lightblue; }
-    to { background-color: inherit; }
+    from {
+      background-color: $lightblue;
+    }
+    to {
+      background-color: inherit;
+    }
   }
   @-o-keyframes row-flash {
-    from { background-color: $lightblue; }
-    to { background-color: inherit; }
+    from {
+      background-color: $lightblue;
+    }
+    to {
+      background-color: inherit;
+    }
   }
   @keyframes row-flash {
-    from { background-color: $lightblue; }
-    to { background-color: inherit; }
+    from {
+      background-color: $lightblue;
+    }
+    to {
+      background-color: inherit;
+    }
   }
   .row-flash {
     -webkit-animation: row-flash 1s infinite; /* Safari 4+ */
-    -moz-animation:    row-flash 1s infinite; /* Fx 5+ */
-    -o-animation:      row-flash 1s infinite; /* Opera 12+ */
-    animation:         row-flash 1s infinite; /* IE 10+ */
+    -moz-animation: row-flash 1s infinite; /* Fx 5+ */
+    -o-animation: row-flash 1s infinite; /* Opera 12+ */
+    animation: row-flash 1s infinite; /* IE 10+ */
   }
-}
\ No newline at end of file
+}
diff --git a/app/common/styles/layout/content.scss b/app/common/styles/layout/content.scss
index bacb093..79229b6 100644
--- a/app/common/styles/layout/content.scss
+++ b/app/common/styles/layout/content.scss
@@ -7,21 +7,32 @@ $nav__seclvlWidth: 240px;
   width: 100%;
   position: relative;
   border-bottom: 1px solid $lightbg__grey;
-  margin: .5em 0 2.2em;
+  margin: 0.5em 0 2.2em;
   padding-left: 0;
 }
 
+// Main element class
 .content__container {
   margin-left: $nav__toplvlWidth;
-  padding: 1em .1em;
-  transition: left 1s ease;
-  @include mediaQuery(x-small){
+  padding: 1em 0.1em;
+
+  @include mediaQuery(x-small) {
     padding: 1rem 2rem;
   }
+
   section.row,
-  .column.row.row, .row.row.columns{
+  .column.row.row,
+  .row.row.columns {
     margin-left: 0;
   }
+
+  // Must be applied to the <main> element in the app
+  // Required to create an elegant page transition
+  @include page-transition;
+  &.ng-leave-active,
+  &.ng-enter {
+    @include page-transition-visibility;
+  }
 }
 
 .content-header {
@@ -30,16 +41,17 @@ $nav__seclvlWidth: 240px;
   margin-top: 2em;
 }
 
-.content-label, label {
+.content-label,
+label {
   color: $darkgrey;
   text-transform: uppercase;
   font-weight: 700;
-  font-size: .75em;
+  font-size: 0.75em;
   margin-bottom: 0;
 }
 
 .subhead {
   width: 100%;
   border-bottom: 1px solid $medgrey;
-  padding-bottom: .5em;
+  padding-bottom: 0.5em;
 }
diff --git a/app/login/styles/index.scss b/app/login/styles/index.scss
index 07d45bf..24df1b9 100644
--- a/app/login/styles/index.scss
+++ b/app/login/styles/index.scss
@@ -1,6 +1,6 @@
 #login {
   @include mediaQuery(medium) {
-    background: linear-gradient(to right, #FFFFFF 49.999%, #e6e9ed 50%);
+    background: linear-gradient(to right, #ffffff 49.999%, #e6e9ed 50%);
     @include fastTransition-all;
   }
 }
@@ -28,7 +28,14 @@
       margin: 0 auto;
     }
   }
-  @include fastTransition-all;
+
+  // Must be applied to the <main> element in the app
+  // Required to create an elegant page transition
+  @include page-transition;
+  &.ng-leave-active,
+  &.ng-enter {
+    @include page-transition-visibility;
+  }
 }
 
 #login__form {
@@ -98,4 +105,3 @@
     color: $error-color;
   }
 }
-