1.0.1 • Published 5 years ago
vue-particle-effect-block v1.0.1
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 |