v-wave is a full-featured material design double-click animation application that is as easy to use as a Vue.js directive.
material ripple effect css, material ripple effect android, material ripple example, circle ripple effect css, css ripple effect on hover
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
Name | Type | Default |
---|---|---|
color | string | "currentColor" |
initialOpacity | number | 0.2 |
finialOpacity | number | 0.1 |
duration | number | 0.4 |
easing | string | ease-out |
cancellationPeriod | number | 75 |
Material Ripple Effect Directive For Vue.js, v-wave Plugin/Github
See Demo And Download
Official Website(justintaddei): Click Here
This superior jQuery/javascript plugin is developed by justintaddei. For extra Advanced Usages, please go to the official website.
Be First to Comment