A full-featured Material Design ripple click animation implementation that is easy to use as a Vue.js directive.
How to use it:
1. Import the 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 the 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 })
Preview:
Changelog:
v1.5.0 (05/21/2022)
- Bug Fixes
- Support local directives
v1.4.0 (03/20/2022)
- Bug Fixes
Download Details:
Author: justintaddei
Live Demo: https://justintaddei.github.io/v-wave/
Download Link: https://github.com/justintaddei/v-wave/archive/master.zip
Official Website: https://github.com/justintaddei/v-wave
Install & Download: