enhancement/ripple

src/components/VBtn/VBtn.ts

@@ -41,7 +41,7 @@ const VBtn = mixins(
     outline: Boolean,
     ripple: {
       type: [Boolean, Object],
-      default: true
+      default: null
     },
     round: Boolean,
     small: Boolean,
@@ -85,6 +85,11 @@ const VBtn = mixins(
       return (!this.outline && !this.flat)
         ? this.addBackgroundColorClassChecks(classes)
         : this.addTextColorClassChecks(classes)
+    },
+    computedRipple (): any {
+      const defaultRipple = this.icon || this.fab ? { circle: true } : true
+      if (this.disabled) return false
+      else return this.ripple || defaultRipple
     }
   },
 

src/directives/ripple.ts

@@ -1,10 +1,14 @@
 import { VNodeDirective } from 'vue'
 
-function style (el: HTMLElement, value: string) {
+function transform (el: HTMLElement, value: string) {
   el.style['transform'] = value
   el.style['webkitTransform'] = value
 }
 
+function opacity (el: HTMLElement, value: number) {
+  el.style['opacity'] = value.toString()
+}
+
 declare global {
   interface Element {
     getElementsByClassName(classNames: string): NodeListOf<HTMLElement>
@@ -15,13 +19,39 @@ declare global {
       enabled?: boolean
       centered?: boolean
       class?: string
+      circle?: boolean
     }
   }
 }
 
 interface RippleOptions {
   class?: string
   center?: boolean
+  circle?: boolean
+}
+
+const calculate = (e: MouseEvent, el: HTMLElement, value: RippleOptions = {}) => {
+  const offset = el.getBoundingClientRect()
+  const localX = e.clientX - offset.left
+  const localY = e.clientY - offset.top
+
+  let radius = 0
+  let scale = 0.3
+  if (el._ripple && el._ripple.circle) {
+    scale = 0.15
+    radius = el.clientWidth / 2
+    radius = radius + Math.sqrt((localX - radius)**2 + (localY - radius)**2) / 4
+  } else {
+    radius = Math.sqrt(el.clientWidth**2 + el.clientHeight**2) / 2
+  }
+
+  const x = value.center ? 0 : `${localX - radius}px`
+  const y = value.center ? 0 : `${localY - radius}px`
+
+  const centerX = `${(el.clientWidth - (radius * 2)) / 2}px`
+  const centerY = `${(el.clientHeight - (radius * 2)) / 2}px`
+
+  return { radius, scale, x, y, centerX, centerY }
 }
 
 const ripple = {
@@ -40,28 +70,33 @@ const ripple = {
       container.className += ` ${value.class}`
     }
 
-    const size = Math.max(el.clientWidth, el.clientHeight) * (value.center ? 1 : 2)
-    const halfSize = size / 2
+    const { radius, scale, x, y, centerX, centerY } = calculate(e, el, value)
+
     animation.className = 'v-ripple__animation'
-    animation.style.width = `${size}px`
-    animation.style.height = `${size}px`
+    animation.style.width = `${radius * 2}px`
+    animation.style.height = animation.style.width
 
     el.appendChild(container)
     const computed = window.getComputedStyle(el)
     if (computed.position !== 'absolute' && computed.position !== 'fixed') el.style.position = 'relative'
 
-    const offset = el.getBoundingClientRect()
-    const x = value.center ? 0 : e.clientX - offset.left - halfSize
-    const y = value.center ? 0 : e.clientY - offset.top - halfSize
-
     animation.classList.add('v-ripple__animation--enter')
     animation.classList.add('v-ripple__animation--visible')
-    style(animation, `translate(${x}px, ${y}px) scale3d(0, 0, 0)`)
+    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')
-      style(animation, `translate(${x}px, ${y}px)  scale3d(1, 1, 1)`)
+      animation.classList.add('v-ripple__animation--in')
+      transform(animation, `translate(${centerX}, ${centerY}) scale3d(0.99,0.99,0.99)`)
+      opacity(animation, 0.25)
+
+      setTimeout(() => {
+        animation.classList.remove('v-ripple__animation--in')
+        animation.classList.add('v-ripple__animation--out')
+        opacity(animation, 0)
+      }, 300)
     }, 0)
   },
 
@@ -77,7 +112,7 @@ const ripple = {
     else animation.dataset.isHiding = 'true'
 
     const diff = performance.now() - Number(animation.dataset.activated)
-    let delay = Math.max(300 - diff, 0)
+    let delay = Math.max(700 - diff, 0)
 
     setTimeout(() => {
       animation.classList.remove('v-ripple__animation--visible')
@@ -124,6 +159,9 @@ function updateRipple (el: HTMLElement, binding: VNodeDirective, wasEnabled: boo
   if (value.class) {
     el._ripple.class = binding.value.class
   }
+  if (value.circle) {
+    el._ripple.circle = value.circle
+  }
   if (enabled && !wasEnabled) {
     if ('ontouchstart' in window) {
       el.addEventListener('touchend', rippleHide, false)

src/mixins/routable.ts

@@ -26,6 +26,12 @@ export default Vue.extend({
     target: String
   },
 
+  computed: {
+    computedRipple (): any {
+      return (this.ripple && !this.disabled) ? this.ripple : false
+    }
+  },
+
   methods: {
     /* eslint-disable-next-line no-unused-vars */
     click (e: MouseEvent): void { /**/ },
@@ -39,8 +45,8 @@ export default Vue.extend({
         props: {},
         directives: [{
           name: 'ripple',
-          value: (this.ripple && !this.disabled) ? this.ripple : false
-        }] as any, // TODO
+          value: this.computedRipple
+        }] as any,
         [this.to ? 'nativeOn' : 'on']: {
           ...this.$listeners,
           click: this.click

src/stylus/components/_ripples.styl

@@ -20,13 +20,15 @@
     border-radius: 50%
     background: currentColor
     opacity: 0
-    transition: $ripple-animation-transition
     pointer-events: none
     overflow: hidden
     will-change: transform, opacity
 
     &--enter
       transition: none
 
-    &--visible
-      opacity: $ripple-animation-visible-opacity
+    &--in
+      transition: $ripple-animation-transition-in
+
+    &--out
+      transition: $ripple-animation-transition-out

src/stylus/settings/_variables.styl

@@ -303,5 +303,6 @@ $input-group-text-field-label-top := 18px
 // ============================================================
 
 // Ripple animation
-$ripple-animation-transition := .3s $transition.linear-out-slow-in
+$ripple-animation-transition-in := transform .3s $transition.fast-out-slow-in, opacity .1s $transition.fast-out-slow-in
+$ripple-animation-transition-out := opacity .4s $transition.fast-out-slow-in
 $ripple-animation-visible-opacity := .15