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
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
+}