Vue Ripple Directive

ripple.styl

.ripple
  position relative
  overflow hidden
  transform translate3d(0, 0, 0)

.ripple:after
  content ''
  display block
  position absolute
  width 100%
  height 100%
  top var(--ripple-top, 0)
  left var(--ripple-left, 0)
  pointer-events none
  background-image radial-gradient(circle at center, #fff 10%, transparent 10.01%)
  background-repeat no-repeat
  transform scale(10, 10)
  opacity 0
  transition transform 0.5s, opacity 1s

.ripple:active:after
  transform scale(0, 0)
  opacity 0.3
  transition 0s

ripple.ts

import Vue, { VNode, VNodeDirective } from 'vue';

Vue.directive('ripple', {
  bind(el: HTMLElement, binding: VNodeDirective, vnode: VNode) {
    el.classList.add('ripple');
    el.addEventListener('click', event => {
      rippler(event, el);
    });
  },
  update(el: HTMLElement, binding: VNodeDirective, vnode: VNode) {
    el.classList.add('ripple');
  }
});

function rippler(event: MouseEvent, el: HTMLElement) {
  let target = el;
  let rect = target.getBoundingClientRect();
  let left = rect.left;
  let top = rect.top;
  let width = target.offsetWidth / 2;
  let height = target.offsetHeight / 2;
  let dx = event.clientX - left - width;
  let dy = event.clientY - top - height;
  let cssText = el.style.cssText;
  cssText = cssText.replace(/--ripple-left: .+px; --ripple-top: .+px;/, '');
  cssText += `--ripple-left: ${dx}px; --ripple-top: ${dy}px;`;

  el.style.cssText = cssText;
}