@basic-ui/material 0.1.9 → 0.1.12

package/build/cjs/index.js

@@ -930,11 +930,9 @@ const opacityIn = react.keyframes({
 });
 const opacityOut = react.keyframes({
   from: {
-    transform: `translate(var(${RIPPLE_TRANSLATE_END}, 0)) scale(var(${RIPPLE_SCALE_END}, 1))`,
     opacity: `var(${RIPPLE_OPACITY_END})`
   },
   to: {
-    transform: `translate(var(${RIPPLE_TRANSLATE_END}, 0)) scale(var(${RIPPLE_SCALE_END}, 1))`,
     opacity: '0'
   }
 });
@@ -1005,7 +1003,7 @@ const useRipple = opts => {
 
   react$1.useEffect(() => {
     return () => {
-      clearTimeout(restartTimeout.current);
+      restartTimeout.current && cancelAnimationFrame(restartTimeout.current);
       clearTimeout(enteringTimeout.current);
       clearTimeout(leavingTimeout.current);
     };
@@ -1046,11 +1044,11 @@ const useRipple = opts => {
     shouldLeave.current = false;
     rippleState.current = 'restart';
     setRipple(_extends__default['default']({}, defaultRipple));
-    restartTimeout.current = window.setTimeout(() => {
+    restartTimeout.current = requestAnimationFrame(() => {
       rippleState.current = 'entering';
       setRipple(calculateRipplePosition(rect, clientX, clientY, center));
       enteringTimeout.current = window.setTimeout(setEntered, enterDuration);
-    }, 16);
+    });
   }; // Styling
 
 
@@ -1063,7 +1061,7 @@ const useRipple = opts => {
       break;
 
     case 'leaving':
-      animation = `${opacityOut} ${leaveDuration}ms forwards`;
+      animation = `${radiusIn} ${enterDuration}ms forwards,` + `${opacityOut} ${leaveDuration}ms forwards`;
       break;
   }