# vue-particle-effect-block

> Bursting particle effect block for Vue.

Latest version **1.0.1** (published 2019-01-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-particle-effect-block
pnpm add vue-particle-effect-block
yarn add vue-particle-effect-block
bun add vue-particle-effect-block
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2019-01-13 |
| First published | 2019-01-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 14.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | iuiaoin |

## Links

- npm: https://www.npmjs.com/package/vue-particle-effect-block
- npm.io page: https://npm.io/package/vue-particle-effect-block

## Dependencies (2)

- [raf](https://npm.io/package/raf.md) ^3.4.0
- [animejs](https://npm.io/package/animejs.md) ^2.2.0

## Recent versions

- 1.0.1 (latest) — 2019-01-13
- 1.0.0 — 2019-01-13

## README

# Vue-particle-effect-block

> Bursting particle effect blocks for Vue.

## [vue-particle-effect-button](https://github.com/jscgq/vue-particle-effect-button) - Original source this library is based on.

## Install

### NPM

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

## Mount

#### mount with global

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

Vue.use(ParticleEffectBlock)
```

#### mount with component

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

export default {
  components: {
    ParticleEffectBlock
  }
}
```

## Usage

```javascript
<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 |

---
_Source: https://npm.io/package/vue-particle-effect-block · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._