fix(animation): Update exit curves to match spec (#971)

Update components that were incorrectly using the _permanent_ exit animation (acceleration curve) to use the _temporary_ exit animation (sharp curve) instead.

https://material.io/guidelines/motion/duration-easing.html#duration-easing-natural-easing-curves
https://material.io/guidelines/motion/movement.html#movement-movement-in-out-of-screen-bounds

Author: acdvorak

packages/mdc-animation/README.md

@@ -33,7 +33,8 @@ We currently have variables for the following 3 animation curves:
 | --- | --- | --- |
 | `$mdc-animation-standard-curve-timing-function` | `cubic-bezier(.4, 0, .2, 1)` | Standard curve; any animations that are visible from start to finish (e.g. a FAB transforming into a toolbar) |
 | `$mdc-animation-deceleration-curve-timing-function` | `cubic-bezier(0, 0, .2, 1)` | Animations that cause objects to enter the screen (e.g. a fade in) |
-| `$mdc-animation-acceleration-curve-timing-function` | `cubic-bezier(.4, 0, ``, 1)` | Animations that cause objects to leave the screen (e.g. a fade out) |
+| `$mdc-animation-acceleration-curve-timing-function` | `cubic-bezier(.4, 0, 1, 1)` | Animations that cause objects to leave the screen permanently (e.g. a fade out) |
+| `$mdc-animation-sharp-curve-timing-function` | `cubic-bezier(.4, 0, .6, 1)` | Animations that cause objects to leave the screen temporarily (e.g. closing a drawer) |
 
 ### SCSS
 

packages/mdc-animation/_functions.scss

@@ -23,3 +23,7 @@
 @function mdc-animation-exit-permanent($name, $duration, $delay: 0ms) {
   @return $name $duration $delay $mdc-animation-acceleration-curve-timing-function;
 }
+
+@function mdc-animation-exit-temporary($name, $duration, $delay: 0ms) {
+  @return $name $duration $delay $mdc-animation-sharp-curve-timing-function;
+}

packages/mdc-animation/_mixins.scss

@@ -27,3 +27,7 @@
 @mixin mdc-animation-acceleration-curve {
   animation-timing-function: $mdc-animation-acceleration-curve-timing-function;
 }
+
+@mixin mdc-animation-sharp-curve {
+  animation-timing-function: $mdc-animation-sharp-curve-timing-function;
+}

packages/mdc-animation/_variables.scss

@@ -17,3 +17,4 @@
 $mdc-animation-deceleration-curve-timing-function: cubic-bezier(0, 0, .2, 1) !default;
 $mdc-animation-standard-curve-timing-function: cubic-bezier(.4, 0, .2, 1) !default;
 $mdc-animation-acceleration-curve-timing-function: cubic-bezier(.4, 0, 1, 1) !default;
+$mdc-animation-sharp-curve-timing-function: cubic-bezier(.4, 0, .6, 1) !default;

packages/mdc-animation/mdc-animation.scss

@@ -28,4 +28,8 @@
   &-acceleration-curve {
     @include mdc-animation-acceleration-curve;
   }
+
+  &-sharp-curve {
+    @include mdc-animation-sharp-curve;
+  }
 }

packages/mdc-checkbox/mdc-checkbox.scss

@@ -30,7 +30,7 @@
 }
 
 @function mdc-checkbox-transition-exit($property, $delay: 0ms, $duration: $mdc-checkbox-transition-duration) {
-  @return mdc-animation-exit-permanent($property, $duration, $delay);
+  @return mdc-animation-exit-temporary($property, $duration, $delay);
 }
 
 @mixin mdc-checkbox-cover-element {

packages/mdc-drawer/_mixins.scss

@@ -112,7 +112,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    transition: mdc-animation-exit-permanent(opacity, 120ms);
+    transition: mdc-animation-exit-temporary(opacity, 120ms);
     border-radius: inherit;
     background: currentColor;
     content: "";

packages/mdc-linear-progress/mdc-linear-progress.scss

@@ -21,7 +21,7 @@
   width: 100%;
   height: 4px;
   transform: translateZ(0);
-  transition: mdc-animation-exit-permanent(opacity, 250ms);
+  transition: mdc-animation-exit-temporary(opacity, 250ms);
   overflow: hidden;
 
   &__bar {
@@ -30,7 +30,7 @@
     width: 100%;
     height: 100%;
     transform-origin: top left;
-    transition: mdc-animation-exit-permanent(transform, 250ms);
+    transition: mdc-animation-exit-temporary(transform, 250ms);
   }
 
   &__bar-inner {
@@ -64,7 +64,7 @@
     width: 100%;
     height: 100%;
     transform-origin: top left;
-    transition: mdc-animation-exit-permanent(transform, 250ms);
+    transition: mdc-animation-exit-temporary(transform, 250ms);
     background-color: #e6e6e6;
   }
 

packages/mdc-radio/mdc-radio.scss

@@ -28,7 +28,7 @@ $mdc-radio-transition-duration: 120ms;
 }
 
 @function mdc-radio-exit($name) {
-  @return mdc-animation-exit-permanent($name, $mdc-radio-transition-duration);
+  @return mdc-animation-exit-temporary($name, $mdc-radio-transition-duration);
 }
 
 // postcss-bem-linter: define radio

packages/mdc-select/mdc-select.scss

@@ -44,8 +44,8 @@
   max-width: calc(100% - #{$dd-arrow-padding});
   height: 32px;
   transition:
-    mdc-animation-exit-permanent(border-bottom-color, 150ms),
-    mdc-animation-exit-permanent(background-color, 150ms);
+    mdc-animation-exit-temporary(border-bottom-color, 150ms),
+    mdc-animation-exit-temporary(background-color, 150ms);
   border: none;
   border-bottom: 1px solid rgba(black, .12);
   border-radius: 0;
@@ -95,8 +95,8 @@
 
   &__selected-text {
     transition:
-      mdc-animation-exit-permanent(opacity, 125ms),
-      mdc-animation-exit-permanent(transform, 125ms);
+      mdc-animation-exit-temporary(opacity, 125ms),
+      mdc-animation-exit-temporary(transform, 125ms);
     white-space: nowrap;
     overflow: hidden;
   }