feat(ripple): Implement subset of improved interaction response guide…

…lines (#419) Background === When the ripple was originally designed from a motion perspective, bounded and unbounded activation/deactivation used two different animation styles, distinct from one another. The UX updates to the ripple remove this distinction of bounded vs. unbounded solely with regard to how the ripple animates in and out. There is still a distinction between bounded vs. unbounded, but we no longer have to account for this when animating the ripple. Thus, there are no API changes; only UX changes. Changes === - Implement UX changes for "tap" + "tap and hold" interactions - Remove all references of "bounded" vs. "unbounded" from activation/deactivation code Resolves #190
material-components · Mar 28, 2017 · 046e337 · 046e337
1 parent f6dbe84
commit 046e337
Show file tree

Hide file tree

Showing 13 changed files with 520 additions and 607 deletions.
diff --git a/packages/mdc-ripple/_keyframes.scss b/packages/mdc-ripple/_keyframes.scss
@@ -20,46 +20,37 @@
 
 @keyframes mdc-ripple-fg-radius-in {
   from {
-    transform: translate(0) scale(1);
+    // NOTE: For these keyframes, we do not need custom property fallbacks because they are only
+    // used in conjunction with `.mdc-ripple-upgraded`. Since MDCRippleFoundation checks to ensure
+    // that custom properties are supported within the browser before adding this class, we can
+    // safely use them without a fallback.
     transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
     animation-timing-function: $mdc-animation-fast-out-slow-in-timing-function;
   }
 
   to {
-    transform: translate(0) scale(0);
-    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 0));
+    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
   }
 }
 
-@keyframes mdc-ripple-fg-opacity-out {
+@keyframes mdc-ripple-fg-opacity-in {
   from {
-    opacity: 1;
+    opacity: 0;
     animation-timing-function: linear;
   }
 
   to {
-    opacity: 0;
+    opacity: 1;
   }
 }
 
-@keyframes mdc-ripple-fg-unbounded-opacity-deactivate {
+@keyframes mdc-ripple-fg-opacity-out {
   from {
     opacity: 1;
+    animation-timing-function: linear;
   }
 
   to {
     opacity: 0;
   }
 }
-
-@keyframes mdc-ripple-fg-unbounded-transform-deactivate {
-  from {
-    transform: 0;
-    transform: var(--mdc-ripple-fg-approx-xf, 0);
-  }
-
-  to {
-    transform: scale(0);
-    transform: scale(var(--mdc-ripple-fg-scale, 0));
-  }
-}
diff --git a/packages/mdc-ripple/_mixins.scss b/packages/mdc-ripple/_mixins.scss
@@ -8,7 +8,8 @@
 //      http://www.apache.org/licenses/LICENSE-2.0
 //
 // Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS, // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
 //
@@ -28,17 +29,14 @@
 }
 
 @mixin mdc-ripple-base() {
+  --mdc-ripple-surface-width: 0;
+  --mdc-ripple-surface-height: 0;
+  --mdc-ripple-fg-size: 0;
   --mdc-ripple-left: 0;
   --mdc-ripple-top: 0;
-  --mdc-ripple-fg-size: 0;
-  --mdc-ripple-surface-height: 0;
-  --mdc-ripple-surface-width: 0;
-  --mdc-ripple-fg-unbounded-transform-duration: 0ms;
-  --mdc-ripple-xfo-x: center;
-  --mdc-ripple-xfo-y: center;
-  --mdc-ripple-fg-unbounded-opacity-duration: 0ms;
-  --mdc-ripple-fg-unbounded-transform-duration: 0ms;
-  --mdc-ripple-fg-approx-xf: 0;
+  --mdc-ripple-fg-scale: 1;
+  --mdc-ripple-fg-translate-end: 0;
+  --mdc-ripple-fg-translate-start: 0;
 
   will-change: transform, opacity;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -121,18 +119,11 @@
     transform: scale(var(--mdc-ripple-fg-scale, 0));
   }
 
-  &.mdc-ripple-upgraded--background-active#{$pseudo} {
+  &.mdc-ripple-upgraded--background-focused#{$pseudo} {
     opacity: .99999;
   }
 
-  // When an element goes active, a foreground ripple will be triggered.
-  // Therefore, we adjust the transition duration for the correct "wind-
-  // up" animation.
-  &.mdc-ripple-upgraded--background-active:active#{$pseudo} {
-    transition-duration: 600ms;
-  }
-
-  &.mdc-ripple-upgraded--background-bounded-active-fill#{$pseudo} {
+  &.mdc-ripple-upgraded--background-active-fill#{$pseudo} {
     transition-duration: 120ms;
     opacity: 1;
   }
@@ -215,29 +206,13 @@
     transform-origin: center center;
   }
 
-  &.mdc-ripple-upgraded--foreground-bounded-active-fill#{$pseudo} {
-    animation-fill-mode: forwards;
-    animation: 300ms mdc-ripple-fg-radius-in, 400ms mdc-ripple-fg-opacity-out;
-  }
-
-  &.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded--foreground-unbounded-activation#{$pseudo} {
-    transform: scale(0);
-    transform: scale(var(--mdc-ripple-fg-scale, 0));
-    transition:
-      opacity 110ms linear,
-      transform 0 linear 80ms;
-    transition:
-      opacity 110ms linear,
-      transform var(--mdc-ripple-fg-unbounded-transform-duration, 0) linear 80ms;
-    opacity: 1;
+  &.mdc-ripple-upgraded--foreground-activation#{$pseudo} {
+    animation: 300ms mdc-ripple-fg-radius-in forwards, 83ms mdc-ripple-fg-opacity-in forwards;
   }
 
-  &.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded--foreground-unbounded-deactivation#{$pseudo} {
-    animation:
-      mdc-ripple-fg-unbounded-opacity-deactivate 0 linear,
-      mdc-ripple-fg-unbounded-transform-deactivate 0 $mdc-animation-fast-out-slow-in-timing-function;
-    animation:
-      mdc-ripple-fg-unbounded-opacity-deactivate var(--mdc-ripple-fg-unbounded-opacity-duration, 0) linear,
-      mdc-ripple-fg-unbounded-transform-deactivate var(--mdc-ripple-fg-unbounded-transform-duration, 0) $mdc-animation-fast-out-slow-in-timing-function;
+  &.mdc-ripple-upgraded--foreground-deactivation#{$pseudo} {
+    // Retain transform from mdc-ripple-fg-radius-in activation
+    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
+    animation: 250ms mdc-ripple-fg-opacity-out;
   }
 }
diff --git a/packages/mdc-ripple/constants.js b/packages/mdc-ripple/constants.js
@@ -14,43 +14,31 @@
  * limitations under the License.
  */
 
-export const ROOT = 'mdc-ripple';
-export const UPGRADED = `${ROOT}-upgraded`;
-
 export const cssClasses = {
   // Ripple is a special case where the "root" component is really a "mixin" of sorts,
   // given that it's an 'upgrade' to an existing component. That being said it is the root
   // CSS class that all other CSS classes derive from.
-  ROOT: UPGRADED,
-  UNBOUNDED: `${UPGRADED}--unbounded`,
-  BG_ACTIVE: `${UPGRADED}--background-active`,
-  BG_BOUNDED_ACTIVE_FILL: `${UPGRADED}--background-bounded-active-fill`,
-  FG_BOUNDED_ACTIVE_FILL: `${UPGRADED}--foreground-bounded-active-fill`,
-  FG_UNBOUNDED_ACTIVATION: `${UPGRADED}--foreground-unbounded-activation`,
-  FG_UNBOUNDED_DEACTIVATION: `${UPGRADED}--foreground-unbounded-deactivation`,
+  ROOT: 'mdc-ripple-upgraded',
+  UNBOUNDED: 'mdc-ripple-upgraded--unbounded',
+  BG_FOCUSED: 'mdc-ripple-upgraded--background-focused',
+  BG_ACTIVE_FILL: 'mdc-ripple-upgraded--background-active-fill',
+  FG_ACTIVATION: 'mdc-ripple-upgraded--foreground-activation',
+  FG_DEACTIVATION: 'mdc-ripple-upgraded--foreground-deactivation',
 };
 
 export const strings = {
-  VAR_SURFACE_WIDTH: `--${ROOT}-surface-width`,
-  VAR_SURFACE_HEIGHT: `--${ROOT}-surface-height`,
-  VAR_FG_SIZE: `--${ROOT}-fg-size`,
-  VAR_FG_UNBOUNDED_OPACITY_DURATION: `--${ROOT}-fg-unbounded-opacity-duration`,
-  VAR_FG_UNBOUNDED_TRANSFORM_DURATION: `--${ROOT}-fg-unbounded-transform-duration`,
-  VAR_LEFT: `--${ROOT}-left`,
-  VAR_TOP: `--${ROOT}-top`,
-  VAR_TRANSLATE_END: `--${ROOT}-translate-end`,
-  VAR_FG_APPROX_XF: `--${ROOT}-fg-approx-xf`,
-  VAR_FG_SCALE: `--${ROOT}-fg-scale`,
-  VAR_FG_TRANSLATE_START: `--${ROOT}-fg-translate-start`,
-  VAR_FG_TRANSLATE_END: `--${ROOT}-fg-translate-end`,
+  VAR_SURFACE_WIDTH: '--mdc-ripple-surface-width',
+  VAR_SURFACE_HEIGHT: '--mdc-ripple-surface-height',
+  VAR_FG_SIZE: '--mdc-ripple-fg-size',
+  VAR_LEFT: '--mdc-ripple-left',
+  VAR_TOP: '--mdc-ripple-top',
+  VAR_FG_SCALE: '--mdc-ripple-fg-scale',
+  VAR_FG_TRANSLATE_START: '--mdc-ripple-fg-translate-start',
+  VAR_FG_TRANSLATE_END: '--mdc-ripple-fg-translate-end',
 };
 
 export const numbers = {
-  FG_TRANSFORM_DELAY_MS: 80,
-  OPACITY_DURATION_DIVISOR: 3,
-  ACTIVE_OPACITY_DURATION_MS: 110,
-  MIN_OPACITY_DURATION_MS: 200,
-  UNBOUNDED_TRANSFORM_DURATION_MS: 200,
   PADDING: 10,
   INITIAL_ORIGIN_SCALE: 0.6,
+  DEACTIVATION_TIMEOUT_MS: 300,
 };