Vue-particle-effect-block

Bursting particle effect blocks for Vue.

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

Install

NPM

npm install --save vue-particle-effect-block

Mount

mount with global

import Vue from 'vue'
import ParticleEffectBlock from 'vue-particle-effect-block'

Vue.use(ParticleEffectBlock)

mount with component

import ParticleEffectBlock from 'vue-particle-effect-block'

export default {
  components: {
    ParticleEffectBlock
  }
}

Usage

<ParticleEffectBlock :hidden="isHidden">
  BLOCK CONTENT GOES HERE
</ParticleEffectBlock>

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 block's contents. If hidden changes to true, the block 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 block should be hidden or visible. Changing this prop starts an animation.
animationOff	string	''	'show' or 'hide' or 'both'
color	string	'#000'	Particle color. Should match the block 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