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

Event

Slot