This package has been deprecated

Author message:

this repository has been deprecated

Vue-particle-effect-button

Bursting particle effect buttons for Vue.

react-particle-effect-button - Original source this library is based on.

Install

NPM

npm install --save vue-particle-effect-button

Mount

mount with global

import Vue from 'vue'
import ParticleEffectButton from 'vue-particle-effect-button'
 
Vue.use(ParticleEffectButton)

mount with component

import ParticleEffectButton from 'vue-particle-effect-button'
 
export default {
  components: {
    ParticleEffectButton
  }
}

Usage

<ParticleEffectButton :hidden="isHidden">
  BUTTON CONTENT GOES HERE
</ParticleEffectButton>
 
export default {
  data() {
    return {
      isHidden: false
    }
  }
}

You change the hidden boolean prop to kick-off an animation, typically as a result of a click on the button's contents. If hidden changes to true, the button will perform a disintegrating animation. If hidden changes to false, it will reverse and reintegrate the original content.

Props

Property	Type	Default	Description
hidden	boolean	false	Whether button should be hidden or visible. Changing this prop starts an animation.
color	string	'#000'	Particle color. Should match the button content's background color
duration	number	1000	Animation duration in milliseconds.
easing	string, array	'easeInOutCubic'	Animation easing.
type	string	circle	'circle' or 'rectangle' or 'triangle'
drawStyle	string	fill	'fill' or 'stroke'
direction	string	'left'	'left' or 'right' or 'top' or 'bottom'
canvasPadding	number	150	Amount of extra padding to add to the canvas since the animation will overflow the content's bounds
size	number	func	random(4)
speed	number	func	random(4)
particlesAmountCoefficient	number	3	Increases or decreases the relative number of particles
oscillationCoefficient	number	20	Increases or decreases the relative curvature of particles

Event

Name	Description	Parameters
begin	triggers when the animation starts	-
complete	triggers when the animation complete	-

Slot

Name	Description
-	Default Slot