Description:
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.3.1 (07/22/2021)
- rewrite vue3 check
v1.3.0 (07/08/2021)
- Bug Fixes
v1.2.7 (02/13/2021)
- Bug Fixes
v1.2.6 (01/29/2021)
- fix: doesn’t respect border-radius in Safari
v1.2.5 (01/27/2021)
- fix: invalid type declarations due to path aliases
v1.2.3 (01/20/2021)
- fix: incorrect handling of wave count
v1.2.0 (01/16/2021)
- fix: remove auto-install that didn’t work right
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: