v-wave is a full-featured material design double-click animation application that is as easy to use as a Vue.js directive.

Here’s what you can expect from this plugin:

• The wave appears on the pointer down instead of the pointer
• There is a slight delay before the ripple appears, during which the animation is canceled if the user moves the cursor (like scrolling on a mobile phone). This is similar to how the original Android Ripples work.
• It uses CSS transformations instead of width and height.
• It does not affect the appearance of the element you are applying it to (it will not explode when used on an element with display: flex).
• It guesses the wave color automatically by default (using CurrentColor).
• Works with fixed, absolute, relative, and fixed positions.
• It will handle independent border radii (eg border-radius: 5px 20px 15px 30px) just fine.

How to make use of it:

1. Import v-wave.

import Vue from 'vue'
import VWave from 'v-wave'

2. Register the v . wave

// register
Vue.use(VWave)

// for nuxt.js
export default {
  modules: ['v-wave/nuxt']
}

3. Attach a material ripple effect to an element.

<button v-wave>Click me!</button>

4. All possible options.

Vue.use(VWave,{
  directive: 'wave',
  color: 'currentColor',
  initialOpacity: 0.2,
  finalOpacity: 0.1,
  duration: 0.4,
  easing: 'ease-out',
  cancellationPeriod: 75
})

Summary

See Demo And Download

Official Website(justintaddei): Click Here

This superior jQuery/javascript plugin is developed by justintaddei. For extra Advanced Usage, please go to the official website.