cargdev/angular
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(aio): improve transitions between pages

Browse Source 
- Avoid unnecessary animations, style transitions, repositioning on
  initial rendering.
- Better handle transitioning from/to Home page (which is the only page
  with transparent top-menu).
- Better coordinate sidenav and hamburger animations with page
  transitions.
- Improve fade-in/out animations.

Fixes #20996
This commit is contained in:
George Kalpakas
2017-12-19 02:26:12 +02:00
committed by Alex Rickabaugh
parent 2986e25abb
commit 8ceffd8b48
6 changed files with 304 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
aio/src/styles/1-layouts/_top-menu.scss
View File

@ -1,3 +1,8 @@
// VARIABLES
$hamburgerShownMargin: 0;
$hamburgerHiddenMargin: 0 24px 0 -88px;
// DOCS PAGE / STANDARD: TOPNAV TOOLBAR FIXED
mat-toolbar.mat-toolbar {
position: fixed;
@ -16,11 +21,13 @@ mat-toolbar.mat-toolbar {
// HOME PAGE OVERRIDE: TOPNAV TOOLBAR
aio-shell.page-home mat-toolbar.mat-toolbar {
background-color: transparent;
transition: background-color .2s linear .3s;
background-color: $blue;
@media (max-width: 480px) {
background-color: $blue;
@media (min-width: 481px) {
&:not(.transitioning) {
background-color: transparent;
transition: background-color .2s linear;
}
}
}
@ -36,10 +43,18 @@ aio-shell.page-resources mat-toolbar.mat-toolbar {
@media (min-width: 481px) {
position: absolute;
}
}
// DOCS PAGES OVERRIDE: HAMBURGER
aio-shell.folder-api mat-toolbar.mat-toolbar,
aio-shell.folder-docs mat-toolbar.mat-toolbar,
aio-shell.folder-guide mat-toolbar.mat-toolbar,
aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
@media (min-width: 992px) {
button.hamburger {
margin: 0 24px 0 -88px;
.hamburger.mat-button {
// Hamburger shown on non-marketing pages on large screens.
margin: $hamburgerShownMargin;
}
}
}
@ -48,16 +63,16 @@ aio-shell.page-resources mat-toolbar.mat-toolbar {
// HAMBURGER BUTTON
.hamburger.mat-button {
height: 100%;
margin: 0;
margin: $hamburgerShownMargin;
padding: 0;
transition-duration: .4s;
transition-property: color, margin;
transition-timing-function: cubic-bezier(.25, .8, .25, 1);
&.starting {
transition-duration: 150ms;
transition-property: background-color, color;
transition-timing-function: ease-in-out;
@media (min-width: 992px) {
// Hamburger hidden by default on large screens.
// (Will be shown per doc.)
margin: $hamburgerHiddenMargin;
}
&:hover {