fix(VRipple): use $ripple-animation-visible-opacity variable (#14365)

fixes #11505
vuetifyjs · Nov 30, 2021 · 3f8f577 · 3f8f577
1 parent 324b818
commit 3f8f577
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 15 deletions.
diff --git a/packages/vuetify/src/directives/ripple/VRipple.sass b/packages/vuetify/src/directives/ripple/VRipple.sass
@@ -1,4 +1,4 @@
-@import './_variables.scss'
+@import '../../styles/styles.sass'
 
 .v-ripple
   &__container
@@ -28,9 +28,12 @@
 
     &--enter
       transition: none
+      opacity: 0
 
     &--in
       transition: $ripple-animation-transition-in
+      opacity: $ripple-animation-visible-opacity
 
     &--out
       transition: $ripple-animation-transition-out
+      opacity: 0
diff --git a/packages/vuetify/src/directives/ripple/_variables.scss b/packages/vuetify/src/directives/ripple/_variables.scss
diff --git a/packages/vuetify/src/directives/ripple/index.ts b/packages/vuetify/src/directives/ripple/index.ts
@@ -17,10 +17,6 @@ function transform (el: HTMLElement, value: string) {
   el.style.webkitTransform = value
 }
 
-function opacity (el: HTMLElement, value: number) {
-  el.style.opacity = value.toString()
-}
-
 export interface RippleOptions {
   class?: string
   center?: boolean
@@ -109,14 +105,12 @@ const ripples = {
     animation.classList.add('v-ripple__animation--enter')
     animation.classList.add('v-ripple__animation--visible')
     transform(animation, `translate(${x}, ${y}) scale3d(${scale},${scale},${scale})`)
-    opacity(animation, 0)
     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)`)
-      opacity(animation, 0.25)
     }, 0)
   },
 
@@ -137,7 +131,6 @@ const ripples = {
     setTimeout(() => {
       animation.classList.remove('v-ripple__animation--in')
       animation.classList.add('v-ripple__animation--out')
-      opacity(animation, 0)
 
       setTimeout(() => {
         const ripples = el.getElementsByClassName('v-ripple__animation')

diff --git a/packages/vuetify/src/styles/settings/_variables.scss b/packages/vuetify/src/styles/settings/_variables.scss
@@ -250,7 +250,7 @@ $secondary-transition: 0.2s map-get($transition, 'ease-in-out') !default;
 // Ripples //;
 $ripple-animation-transition-in: transform 0.25s map-get($transition, 'fast-out-slow-in'), opacity 0.1s map-get($transition, 'fast-out-slow-in') !default;
 $ripple-animation-transition-out: opacity 0.3s map-get($transition, 'fast-out-slow-in') !default;
-$ripple-animation-visible-opacity: 0.15 !default;
+$ripple-animation-visible-opacity: 0.25 !default;
 
 // Elements //;
 $bootable-transition: 0.2s map-get($transition, 'fast-out-slow-in') !default;