refactor(sidenav): switch to the angular animations API (#4959)

* refactor(sidenav): switch to the angular animations API

Switches the sidenav to use the `@angular/animations` API. This saves us a lot of code that was involved in orchestrating the various animations, in addition to making it easier to follow. It also makes it possible for the consumer to disable the animations by using the `NoopAnimationsModule`.

* chore: remove redundant annotations

* fix: focus restoration issue in IE

* chore: linting error

* chore: put back the toggle animation promises

* fix: avoid initial animation

* fix: sidenav not showing when animation starts

* chore: update e2e tests

e2e/components/sidenav-e2e.spec.ts

@@ -1,26 +1,27 @@
-import {browser, by, element, ExpectedConditions} from 'protractor';
+import {browser, by, element, ElementFinder} from 'protractor';
 
 describe('sidenav', () => {
   describe('opening and closing', () => {
-    beforeEach(() => browser.get('/sidenav'));
-
-    let input = element(by.tagName('md-sidenav'));
+    let sidenav: ElementFinder;
 
+    beforeEach(() => {
+      browser.get('/sidenav');
+      sidenav = element(by.tagName('md-sidenav'));
+    });
 
     it('should be closed', () => {
-      expect(input.isDisplayed()).toBeFalsy();
+      expect(sidenav.isDisplayed()).toBeFalsy();
     });
 
     it('should open', () => {
       element(by.buttonText('Open sidenav')).click();
-      expect(input.isDisplayed()).toBeTruthy();
+      expect(sidenav.isDisplayed()).toBeTruthy();
     });
 
     it('should close again', () => {
       element(by.buttonText('Open sidenav')).click();
       element(by.buttonText('Open sidenav')).click();
-      browser.wait(ExpectedConditions.presenceOf(element(by.className('mat-sidenav-closed'))), 999);
-      expect(input.isDisplayed()).toBeFalsy();
+      expect(sidenav.isDisplayed()).toBeFalsy();
     });
   });
 });

src/lib/sidenav/sidenav-transitions.scss

@@ -2,10 +2,6 @@
 @import '../core/style/variables';
 
 .mat-sidenav-transition {
-  .mat-sidenav {
-    transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
-  }
-
   .mat-sidenav-content {
     transition: {
       duration: $swift-ease-out-duration;

src/lib/sidenav/sidenav.scss

@@ -3,26 +3,6 @@
 @import '../core/style/layout-common';
 @import '../core/a11y/a11y';
 
-
-// Mixin to help with defining LTR/RTL 'transform: translate3d()' values.
-// @param $open The translation value when the sidenav is opened.
-// @param $close The translation value when the sidenav is closed.
-@mixin mat-sidenav-transition($open, $close) {
-  transform: translate3d($close, 0, 0);
-
-  &.mat-sidenav-closed {
-    // We use 'visibility: hidden | visible' because 'display: none' will not animate any
-    // transitions, while visibility will interpolate transitions properly.
-    // see https://developer.mozilla.org/en-US/docs/Web/CSS/visibility, the Interpolation
-    // section.
-    visibility: hidden;
-  }
-
-  &.mat-sidenav-opening, &.mat-sidenav-opened {
-    transform: translate3d($open, 0, 0);
-  }
-}
-
 // Mixin that creates a new stacking context.
 // see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
 @mixin mat-sidenav-stacking-context() {
@@ -103,27 +83,24 @@
   box-sizing: border-box;
   height: 100%;
   overflow-y: auto; // TODO(kara): revisit scrolling behavior for sidenavs
-
-  @include mat-sidenav-transition(0, -100%);
+  transform: translate3d(-100%, 0, 0);
 
   &.mat-sidenav-side {
     z-index: 1;
   }
 
   &.mat-sidenav-end {
     right: 0;
-
-    @include mat-sidenav-transition(0, 100%);
+    transform: translate3d(100%, 0, 0);
   }
 
   [dir='rtl'] & {
-    @include mat-sidenav-transition(0, 100%);
+    transform: translate3d(100%, 0, 0);
 
     &.mat-sidenav-end {
       left: 0;
       right: auto;
-
-      @include mat-sidenav-transition(0, -100%);
+      transform: translate3d(-100%, 0, 0);
     }
   }