enhancement/ripple

src/components/VBtn/VBtn.ts

@@ -15,6 +15,7 @@ import Routable from '../../mixins/routable'
 import Themeable from '../../mixins/themeable'
 import { factory as ToggleableFactory } from '../../mixins/toggleable'
 import { inject as RegistrableInject } from '../../mixins/registrable'
+import { RippleOptions } from '../../directives/ripple'
 
 const VBtn = mixins(
   Colorable,
@@ -41,8 +42,8 @@ const VBtn = mixins(
     outline: Boolean,
     ripple: {
       type: [Boolean, Object],
-      default: true
-    },
+      default: null
+    } as PropValidator<RippleOptions | boolean | null>,
     round: Boolean,
     small: Boolean,
     tag: {
@@ -85,6 +86,11 @@ const VBtn = mixins(
       return (!this.outline && !this.flat)
         ? this.addBackgroundColorClassChecks(classes)
         : this.addTextColorClassChecks(classes)
+    },
+    computedRipple (): RippleOptions | boolean {
+      const defaultRipple = this.icon || this.fab ? { circle: true } : true
+      if (this.disabled) return false
+      else return this.ripple !== null ? 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 {
+export 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

@@ -1,7 +1,7 @@
 import Vue, { VNodeData } from 'vue'
 import { PropValidator } from 'vue/types/options'
 
-import Ripple from '../directives/ripple'
+import Ripple, { RippleOptions } from '../directives/ripple'
 
 export default Vue.extend({
   name: 'routable',
@@ -28,6 +28,12 @@ export default Vue.extend({
     target: String
   },
 
+  computed: {
+    computedRipple (): RippleOptions | boolean {
+      return (this.ripple && !this.disabled) ? this.ripple : false
+    }
+  },
+
   methods: {
     /* eslint-disable-next-line no-unused-vars */
     click (e: MouseEvent): void { /**/ },
@@ -41,8 +47,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, // TODO: remove as any when vuejs/vue#8013 is fixed
         [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

@@ -296,5 +296,6 @@ $tab-text-transform := uppercase
 // ============================================================
 
 // 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

test/unit/components/VBtn/VBtn.spec.js

@@ -177,4 +177,14 @@ test('VBtn.js', ({ mount, compileToFunctions }) => {
     expect(wrapper.hasClass('v-btn--outline')).toBe(true)
     expect(wrapper.hasClass('v-btn--depressed')).toBe(true)
   })
+
+  it('should disable ripple', () => {
+    const wrapper = mount(VBtn, {
+      propsData: {
+        ripple: false
+      }
+    })
+
+    expect(wrapper.element._ripple.enabled).toBe(false)
+  })
 })