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`.

Author: crisbeto

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,25 @@
   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);
+  visibility: hidden;
 
   &.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);
     }
   }