A bursting particles effects buttons component.Bursting particle effect buttons for Vue.js
This library is a Vue portal of an awesome
npm install --save animejs vue-particle-effect-buttons
import ParticleEffectButton from "vue-particle-effect-buttons"
<template>
<ParticleBtn
:visible.sync="btnOps.visible"
:animating.sync="btnOps.animating"
:options="btnOps"
cls="btn-cls"
>
hello eveybody!
</ParticleBtn>
<h2>animating:{{btnOps.animating}}</h2>
<h2>visible:{{btnOps.visible}}</h2>
<button @click="btnOps.visible=!btnOps.visible">toggle</button>
</div>
</template>
<template>
<ParticleBtn
:visible.sync="btnOps.visible"
:animating.sync="btnOps.animating"
:options="btnOps"
cls="btn-cls"
>
hello eveybody!
</ParticleBtn>
<h2>animating:{{btnOps.animating}}</h2>
<h2>visible:{{btnOps.visible}}</h2>
<button @click="btnOps.visible=!btnOps.visible">toggle</button>
</div>
</template>
<script>
import ParticleEffectButton from "vue-particle-effect-buttons"
export default {
data() {
return {
btnOps: {
type: "triangle",
easing: "easeOutQuart",
size: 6,
particlesAmountCoefficient: 4,
oscillationCoefficient: 2,
color: function () {
return Math.random() < 0.5 ? "#000000" : "#ffffff";
},
onComplete: () => {
console.log("complete");
},
onBegin: () => {
console.log("begin");
},
visible: true,
animating: false
},
}
},
components: {
ParticleEffectButton
}
};
</script>
Note that children can be anything, The children should represent the button’s contents.
You change the visible boolean prop to kick-off an animation, typically as a result of a click on the button’s contents. If visible changes to false, the button will perform a disintegrating animation. If visible changes to true, it will reverse and reintegrate the original content.
Live Demo: https://dreambo8563.github.io/vue-particle-effect-buttons/
Download Link: https://github.com/dreambo8563/vue-particle-effect-buttons/archive/master.zip
Official Website: https://github.com/dreambo8563/vue-particle-effect-buttons
#vuejs #javascript #vue-js