fix(VRipple): no animation on mobile

fixes #12288
vuetifyjs · Aug 21, 2024 · e084524 · e084524
1 parent 7e9a1b7
commit e084524
Showing 1 changed file with 7 additions and 5 deletions.
diff --git a/packages/vuetify/src/directives/ripple/index.ts b/packages/vuetify/src/directives/ripple/index.ts
@@ -119,11 +119,13 @@ const ripples = {
     transform(animation, `translate(${x}, ${y}) scale3d(${scale},${scale},${scale})`)
     animation.dataset.activated = String(performance.now())
 
-    setTimeout(() => {
-      animation.classList.remove('v-ripple__animation--enter')
-      animation.classList.add('v-ripple__animation--in')
-      transform(animation, `translate(${centerX}, ${centerY}) scale3d(1,1,1)`)
-    }, 0)
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        animation.classList.remove('v-ripple__animation--enter')
+        animation.classList.add('v-ripple__animation--in')
+        transform(animation, `translate(${centerX}, ${centerY}) scale3d(1,1,1)`)
+      })
+    })
   },
 
   hide (el: HTMLElement | null) {