fix(aio): animate hamburger in/out

Fixes #17215

aio/src/app/app.component.html

@@ -5,7 +5,7 @@
 </div>
 
 <md-toolbar color="primary" class="app-toolbar">
-  <button class="hamburger" md-button
+  <button class="hamburger" [class.starting]="isStarting" md-button
     (click)="sidenav.toggle()" title="Docs menu">
     <md-icon [ngClass]="{'sidenav-open': !isSideBySide }" svgIcon="menu"></md-icon>
   </button>

aio/src/styles/1-layouts/_top-menu.scss

@@ -86,10 +86,8 @@ aio-shell.page-resources md-toolbar.mat-toolbar {
   }
 
   @media (min-width: 992px) {
-    padding-left: 24px;
-
     button.hamburger {
-      display: none;
+      margin: 0 24px 0 -88px;
     }
   }
 }

aio/src/styles/2-modules/_hamburger.scss

@@ -8,14 +8,19 @@
 }
 
 .hamburger.mat-button {
-    transition: color 0.2s;
-    height: 100%;
-    margin: 0;
-    padding: 0;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+
+  &:not(.starting) {
+    transition-duration: .4s;
+    transition-property: color, margin;
+    transition-timing-function: cubic-bezier(.25, .8, .25, 1);
+  }
 }
 
 .hamburger.mat-button:hover {
-    color: $offwhite;
+  color: $offwhite;
 }
 
 .hamburger .mat-icon {