feat(core): tweak touch ripple

framework7io · Mar 31, 2023 · 4419887 · 4419887
1 parent 5850615
commit 4419887
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 34 deletions.
diff --git a/src/core/components/touch-ripple/touch-ripple-class.js b/src/core/components/touch-ripple/touch-ripple-class.js
@@ -26,7 +26,7 @@ export default class TouchRipple {
       const distanceFromCenter =
         ((center.x - width / 2) ** 2 + (center.y - height / 2) ** 2) ** 0.5;
       const scale = (diameter / 2 + distanceFromCenter) / (diameter / 2);
-      ripple.rippleTransform = `translate3d(0px, 0px, 0) scale(${scale})`;
+      ripple.rippleTransform = `translate3d(0px, 0px, 0) scale(${scale * 2})`;
     } else {
       // prettier-ignore
       ripple.rippleTransform = `translate3d(${-center.x + width / 2}px, ${-center.y + height / 2}px, 0) scale(1)`;
@@ -36,7 +36,9 @@ export default class TouchRipple {
     }
 
     ripple.$rippleWaveEl = $(
-      `<div class="ripple-wave" style="width: ${diameter}px; height: ${diameter}px; margin-top:-${
+      `<div class="ripple-wave${
+        isInset ? ' ripple-wave-inset' : ''
+      }" style="width: ${diameter}px; height: ${diameter}px; margin-top:-${
         diameter / 2
       }px; margin-left:-${diameter / 2}px; left:${center.x}px; top:${
         center.y
@@ -45,8 +47,7 @@ export default class TouchRipple {
 
     $el.prepend(ripple.$rippleWaveEl);
 
-    ripple.$rippleWaveEl.animationEnd((e) => {
-      if ((e.animationName && e.animationName === 'touch-ripple-bg-in') || e.pseudoElement) return;
+    ripple.$rippleWaveEl.animationEnd(() => {
       if (!ripple.$rippleWaveEl) return;
       if (ripple.$rippleWaveEl.hasClass('ripple-wave-out')) return;
       ripple.$rippleWaveEl.addClass('ripple-wave-in');
@@ -80,8 +81,7 @@ export default class TouchRipple {
       ripple.destroy();
     }, 300);
 
-    $rippleWaveEl.animationEnd((e) => {
-      if ((e.animationName && e.animationName === 'touch-ripple-bg-in') || e.pseudoElement) return;
+    $rippleWaveEl.animationEnd(() => {
       clearTimeout(ripple.removeTimeout);
       ripple.destroy();
     });

diff --git a/src/core/components/touch-ripple/touch-ripple.less b/src/core/components/touch-ripple/touch-ripple.less
@@ -30,25 +30,14 @@
   transform: translate3d(0px, 0px, 0) scale(0);
   background-image: radial-gradient(
     closest-side circle at 50% 50%,
-    var(--f7-touch-ripple-color),
+    var(--f7-touch-ripple-color) 50%,
     rgba(255, 255, 255, 0)
   );
-  background-color: transparent !important;
-  animation: touch-ripple-in 200ms forwards;
-  &::before {
-    content: '';
-    border-radius: 50%;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-    animation: touch-ripple-bg-in 200ms forwards;
-    background-image: radial-gradient(
-      closest-side circle at 50% 50%,
-      rgba(255, 255, 255, 0),
-      var(--f7-touch-ripple-color)
-    );
+  background-color: transparent;
+  animation: touch-ripple-in 250ms forwards;
+  &.ripple-wave-inset {
+    background-image: none;
+    background-color: var(--f7-touch-ripple-color);
   }
   &.ripple-wave-out {
     transform: var(--f7-ripple-transform);
@@ -76,17 +65,6 @@
   }
 }
 
-@keyframes touch-ripple-bg-in {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
 @keyframes touch-ripple-out {
   from {
     opacity: 1;