fix(radio): update motion to current spec

PiperOrigin-RevId: 500761190
material-components · Jan 9, 2023 · 95897b3 · 95897b3
1 parent 5a27f05
commit 95897b3
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 23 deletions.
diff --git a/radio/lib/_radio.scss b/radio/lib/_radio.scss
@@ -95,39 +95,39 @@ $_md-sys-motion: tokens.md-sys-motion-values();
     width: var(--_icon-size);
   }
 
-  .inner-circle {
+  .outer.circle {
+    // Outline color enter/exit transition
+    transition: fill 50ms linear;
+  }
+
+  .inner.circle {
     opacity: 0;
-    transition-duration: 150ms, 50ms; // Exit duration for scale and opacity.
-    transition-property: transform, opacity;
-    // Exit easing function for scale, linear for opacity.
-    transition-timing-function: map.get(
-        $_md-sys-motion,
-        easing-emphasized-accelerate
-      ),
-      linear;
-    transform: scale(0.6);
     transform-origin: center;
+    transition: opacity 50ms linear;
   }
 
   :host([checked]) .icon {
     fill: var(--_selected-icon-color);
   }
 
-  :host([checked]) .inner-circle {
+  :host([checked]) .inner.circle {
+    animation: inner-circle-grow 300ms
+      map.get($_md-sys-motion, easing-emphasized-decelerate);
     opacity: 1;
-    // Enter duration for scale and opacity.
-    transition-duration: 350ms, 50ms;
-    // Enter easing function for scale, linear for opacity.
-    transition-timing-function: map.get(
-        $_md-sys-motion,
-        easing-emphasized-decelerate
-      ),
-      linear;
-    transform: scale(1);
+  }
+
+  @keyframes inner-circle-grow {
+    from {
+      transform: scale(0);
+    }
+    to {
+      transform: scale(1);
+    }
   }
 
   // Don't animate when disabled
-  :host([disabled]) .inner-circle {
+  :host([disabled]) .circle {
+    animation-duration: 0s;
     transition-duration: 0s;
   }
 

diff --git a/radio/lib/radio.ts b/radio/lib/radio.ts
@@ -107,8 +107,8 @@ export class Radio extends LitElement {
           <rect width="100%" height="100%" fill="white" />
           <circle cx="10" cy="10" r="8" fill="black" />
         </mask>
-        <circle cx="10" cy="10" r="10" mask="url(#cutout)" />
-        <circle cx="10" cy="10" r="5" class="inner-circle" />
+        <circle class="outer circle" cx="10" cy="10" r="10" mask="url(#cutout)" />
+        <circle class="inner circle" cx="10" cy="10" r="5" />
       </svg>
       <input
         type="radio"