fix(aio): smoother transition from page with SideNav to homepage (#17312)
fix(aio): smoother transition from page with SideNav to homepage (#17312)

When navigating from a page with open SideNav to a page without closed SideNav,
the main content area animates from a non-zero left margin to zero left margin.
Additionally, the top-bar on the homepage is transparent, which allows the white
background behind the main content to be seen while the left margin is animated
to zero, making it appear as if something (e.g. the SideNav covers the top-bar).

This commit works around this issue, by not making the top-bar transparent
immediately when navigating to the homepage, but animating it from its blue
color to transparent with a delay.

Fixes #17248
LucasSloan/angular,kegluneq/angular,NathanWalker/angular,mprobst/angular,vsavkin/angular,hansl/angular,NathanWalker/angular,snaptech/angular,tbosch/angular,kara/angular,gkalpak/angular,sarunint/angular,aboveyou00/angular,trshafer/angular,mgol/angular,mlaval/angular,rkirov/angular,NathanWalker/angular,vicb/angular,vicb/angular,pk-karthik/framework-js-angular,Brocco/angular,gkalpak/angular,vikerman/angular,robwormald/angular,vikerman/angular,JiaLiPassion/angular,aboveyou00/angular,vikerman/angular,heathkit/angular,gdi2290/angular,wKoza/angular,gkalpak/angular,blesh/angular,juleskremer/angular,cexbrayat/angular,smartm0use/angular,trshafer/angular,vicb/angular,Brocco/angular,kegluneq/angular,kegluneq/angular,wKoza/angular,LucasSloan/angular,mzgol/angular,mprobst/angular,ocombe/angular,tbosch/angular,aboveyou00/angular,aboveyou00/angular,dtoroshin/n2oDoc,brandonroberts/angular,vsavkin/angular,juristr/angular,ocombe/angular,Toxicable/angular,angular-indonesia/angular,vicb/angular,manekinekko/angular,mhevery/angular,kara/angular,filipesilva/angular,mgol/angular,robwormald/angular,dsebastien/angular,snaptech/angular,angular/angular,hansl/angular,petebacondarwin/angular,pkozlowski-opensource/angular,angularbrasil/angular,dtoroshin/n2oDoc,petebacondarwin/angular,hansl/angular,ValtoFrameworks/Angular-2,gdi2290/angular,jonrimmer/angular,wKoza/angular,jonrimmer/angular,alxhub/angular,souvikbasu/angular,cironunes/angular,meeroslav/angular,kegluneq/angular,alxhub/angular,petebacondarwin/angular,Toxicable/angular,matsko/angular,StephenFluin/angular,LucasSloan/angular,vsavkin/angular,Toxicable/angular,sarunint/angular,mgol/angular,jonrimmer/angular,smartm0use/angular,shairez/angular,hansl/angular,smartm0use/angular,ocombe/angular,StephenFluin/angular,IgorMinar/angular,smartm0use/angular,filipesilva/angular,mlaval/angular,juleskremer/angular,cironunes/angular,jonrimmer/angular,juristr/angular,trshafer/angular,angularbrasil/angular,tbosch/angular,angular/angular,pkozlowski-opensource/angular,NathanWalker/angular,pkozlowski-opensource/angular,blesh/angular,jasonaden/angular,mdegoo/angular,kegluneq/angular,robwormald/angular,LucasSloan/angular,hansl/angular,kegluneq/angular,mprobst/angular,mdegoo/angular,rkirov/angular,nosovk/angular,angular/angular,nosovk/angular,Brocco/angular,IgorMinar/angular,pk-karthik/framework-js-angular,mhevery/angular,mgol/angular,petebacondarwin/angular,mzgol/angular,mdegoo/angular,angular/angular,ultrasonicsoft/angular,wKoza/angular,vikerman/angular,sarunint/angular,blesh/angular,chuckjaz/angular,dsebastien/angular,mprobst/angular,rkirov/angular,meeroslav/angular,filipesilva/angular,souvikbasu/angular,ValtoFrameworks/Angular-2,souvikbasu/angular,juleskremer/angular,jonrimmer/angular,mzgol/angular,filipesilva/angular,gjungb/angular,brandonroberts/angular,StephenFluin/angular,ultrasonicsoft/angular,matsko/angular,robwormald/angular,chuckjaz/angular,JiaLiPassion/angular,StephenFluin/angular,shairez/angular,manekinekko/angular,alexeagle/angular,manekinekko/angular,dsebastien/angular,ValtoFrameworks/Angular-2,mdegoo/angular,filipesilva/angular,manekinekko/angular,gnomeontherun/angular,mzgol/angular,matsko/angular,mgol/angular,jasonaden/angular,mhevery/angular,Toxicable/angular,nosovk/angular,angularbrasil/angular,kara/angular,dsebastien/angular,juristr/angular,dsebastien/angular,alxhub/angular,gdi2290/angular,kara/angular,nosovk/angular,snaptech/angular,petebacondarwin/angular,mprobst/angular,mzgol/angular,petebacondarwin/angular,brandonroberts/angular,mdegoo/angular,heathkit/angular,JiaLiPassion/angular,rkirov/angular,heathkit/angular,jonrimmer/angular,trshafer/angular,gjungb/angular,ghetolay/angular,Brocco/angular,IgorMinar/angular,trshafer/angular,sarunint/angular,vikerman/angular,gnomeontherun/angular,chuckjaz/angular,alexeagle/angular,Brocco/angular,meeroslav/angular,angularbrasil/angular,cironunes/angular,IdeaBlade/angular,dtoroshin/n2oDoc,juristr/angular,ValtoFrameworks/Angular-2,StephenFluin/angular,shairez/angular,ghetolay/angular,ValtoFrameworks/Angular-2,wKoza/angular,alexeagle/angular,IdeaBlade/angular,robwormald/angular,pk-karthik/framework-js-angular,tbosch/angular,angularbrasil/angular,cironunes/angular,IdeaBlade/angular,cironunes/angular,souvikbasu/angular,chuckjaz/angular,smartm0use/angular,vicb/angular,ghetolay/angular,shairez/angular,meeroslav/angular,gdi2290/angular,gjungb/angular,mgiambalvo/angular,heathkit/angular,snaptech/angular,meeroslav/angular,cexbrayat/angular,manekinekko/angular,rkirov/angular,vikerman/angular,mhevery/angular,mhevery/angular,shairez/angular,brandonroberts/angular,LucasSloan/angular,alexeagle/angular,juleskremer/angular,JiaLiPassion/angular,souvikbasu/angular,gjungb/angular,dsebastien/angular,sarunint/angular,dtoroshin/n2oDoc,NathanWalker/angular,angular-indonesia/angular,mgiambalvo/angular,manekinekko/angular,mgiambalvo/angular,Toxicable/angular,blesh/angular,mgechev/angular,kara/angular,IgorMinar/angular,alxhub/angular,angular-indonesia/angular,ultrasonicsoft/angular,mzgol/angular,Toxicable/angular,vsavkin/angular,ghetolay/angular,juristr/angular,angular-indonesia/angular,snaptech/angular,IdeaBlade/angular,matsko/angular,jasonaden/angular,mgechev/angular,mgechev/angular,mgechev/angular,gjungb/angular,mhevery/angular,IgorMinar/angular,sarunint/angular,angularbrasil/angular,vicb/angular,juristr/angular,ultrasonicsoft/angular,NathanWalker/angular,ghetolay/angular,mdegoo/angular,IdeaBlade/angular,brandonroberts/angular,juleskremer/angular,ocombe/angular,mlaval/angular,Brocco/angular,alxhub/angular,chuckjaz/angular,mgiambalvo/angular,IgorMinar/angular,ultrasonicsoft/angular,ultrasonicsoft/angular,dtoroshin/n2oDoc,mlaval/angular,aboveyou00/angular,gkalpak/angular,cexbrayat/angular,gnomeontherun/angular,heathkit/angular,gnomeontherun/angular,chuckjaz/angular,alexeagle/angular,kara/angular,hansl/angular,vsavkin/angular,LucasSloan/angular,mgiambalvo/angular,jasonaden/angular,gdi2290/angular,pk-karthik/framework-js-angular,cexbrayat/angular,pkozlowski-opensource/angular,tbosch/angular,rkirov/angular,mprobst/angular,ocombe/angular,jasonaden/angular,pk-karthik/framework-js-angular,cexbrayat/angular,mgechev/angular,mlaval/angular,matsko/angular,blesh/angular,mgol/angular,jasonaden/angular,alexeagle/angular,cironunes/angular,pkozlowski-opensource/angular,nosovk/angular,wKoza/angular,snaptech/angular,brandonroberts/angular,robwormald/angular,trshafer/angular,aboveyou00/angular,heathkit/angular,ocombe/angular,gdi2290/angular