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

fix(aio): reduce flicker and reflows for initial rendering (#21695)

Browse Source 
For the initial rendering, where there is no transition from a previous
visual state to a new one, animations make little sense. The page should
load with as few reflows as possible.
Similarly, while we typically want to defer updating the SideNav state
(e.g. opened/closed) until the "leaving" document is animated out of the
page, on the initial rendering (where there is no "leaving" document)
this leads to the SideNav flashing (from closed to open).

These worked as expected before, but several parts (mostly related to
documents with a SideNav) have been accidentally broken in recent
commits (e.g. when upgraded to latest material, or enabled animations
for DocViewer transitions, etc.).

This commit restores the previous behavior by ensuring that (on the
initial rendering) the SideNav state is updated as soon as possible and
that there will be no animations when:

1. The hamburger button appears.
2. The SideNav is opened.
3. The main section's width is adjusted to make room for the SideNav.

PR Close #21695
This commit is contained in:
George Kalpakas
2018-01-21 14:41:52 +02:00
committed by Miško Hevery
parent bec188506c
commit 66191e8a37
5 changed files with 91 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
aio/src/styles/1-layouts/_sidenav.scss
View File

@ -1,11 +1,6 @@
// Disable sidenav animations while starting the app
// See https://github.com/angular/material2/blob/master/src/lib/sidenav/sidenav-transitions.scss
.starting.mat-sidenav-transition {
.mat-sidenav,
.mat-sidenav-content,
.mat-sidenav-backdrop.mat-sidenav-shown {
transition: none;
}
// Disable sidenav animations for the initial render.
.starting.mat-drawer-transition .mat-drawer-content {
transition: none;
}
aio-nav-menu {
@ -42,19 +37,19 @@ mat-sidenav.mat-sidenav.sidenav {
}
mat-sidenav-container.sidenav-container {
min-height: 100%;
height: auto !important;
max-width: 100%;
margin: 0;
transform: none;
min-height: 100%;
height: auto !important;
max-width: 100%;
margin: 0;
transform: none;
&.has-floating-toc {
max-width: 82%;
}
&.has-floating-toc {
max-width: 82%;
}
}
mat-sidenav-container div.mat-sidenav-content {
height: auto;
height: auto;
}
.vertical-menu-item {
@ -165,7 +160,6 @@ button.vertical-menu-item {
.level-1:not(.expanded) .mat-icon, .level-2:not(.expanded) .mat-icon {
@include rotate(0deg);
// margin: 4px;
}
aio-nav-menu.top-menu {

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

@ -68,9 +68,12 @@ aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
height: 100%;
margin: $hamburgerShownMargin;
padding: 0;
transition-duration: .4s;
transition-property: color, margin;
transition-timing-function: cubic-bezier(.25, .8, .25, 1);
&:not(.starting) {
transition-duration: .4s;
transition-property: color, margin;
transition-timing-function: cubic-bezier(.25, .8, .25, 1);
}
@media (min-width: 992px) {
// Hamburger hidden by default on large screens.