Press "Enter" to skip to content

Material Ripple Effect Directive For Vue | v-wave

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

NameTypeDefault
colorstring"currentColor"
initialOpacitynumber0.2
finialOpacitynumber0.1
durationnumber0.4
easingstringease-out
cancellationPeriodnumber75

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

    Leave a Reply

    Your email address will not be published. Required fields are marked *