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) | Particle size. May be a static number or a function which returns numbers. | | speed | number | func | random(4) | Particle speed. May be a static number or a function which returns numbers. | | 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 |