# @maybecode/vue-next-animejs

> Vue3 directive for animejs

Latest version **1.0.5** (published 2020-10-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @maybecode/vue-next-animejs
pnpm add @maybecode/vue-next-animejs
yarn add @maybecode/vue-next-animejs
bun add @maybecode/vue-next-animejs
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2020-10-26 |
| First published | 2020-10-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 40.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Maybe |
| Maintainers | qq1013480204 |

## Links

- npm: https://www.npmjs.com/package/@maybecode/vue-next-animejs
- Repository: https://gitee.com/null_639_5368/vue-next-animejs
- npm.io page: https://npm.io/package/@maybecode/vue-next-animejs

## Dependencies (1)

- [animejs](https://npm.io/package/animejs.md) ^3.2.1

## Recent versions

- 1.0.5 (latest) — 2020-10-26
- 1.0.3 — 2020-10-26
- 1.0.1 — 2020-10-26
- 1.0.0 — 2020-10-26

## README

# 🌟vue-next-animejs

## Introduction
  * Vue3 directive  for animejs
  * based on  animejs 

[![npm](https://img.shields.io/npm/v/@maybecode/vue-next-animejs.svg)](https://www.npmjs.com/package/@maybecode/vue-next-animejs)
[![npm](https://img.shields.io/npm/dt/@maybecode/vue-next-animejs.svg)](https://www.npmjs.com/package/@maybecode/vue-next-animejs)
[![npm](https://img.shields.io/bundlephobia/min/@maybecode/vue-next-animejs.svg)](https://www.npmjs.com/package/@maybecode/vue-next-animejs)
## Demo
[demo](http://null_639_5368.gitee.io/vue-next-animejs)

## Animejs Doc
[english doc](https://animejs.com)

[chinese doc](https://www.animejs.cn)

## Installation
```
npm install @maybecode/vue-next-animejs 
```

```
import vueNextAnimejs from '@maybecode/vue-next-animejs'

createApp(App).use(vueNextAnimejs).mount('#app')
```

## How to use 
### template 
***
```
  <div class="block" v-anime="{ translateX: 100 }"></div>
  <div class="block" class="test1"></div>
  <div class="block" class="test2"></div>
```
### options api 
***
```
export default {
  mounted() {
     this.$anime({
      targets: ".test1",
      translateX: 120,
    });
    this.$anime({
      targets: ".test2",
      translateX: 150,
    });
  },
};
```
#### Typescript

 In options API of typescript, you should extend interface ComponentCustomProperties.

```
// global-properties.d.ts

import { AnimeFn } from '@maybecode/vue-next-animejs'


declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
        $anime: AnimeFn
    }
}
```
### composition api 
***
```
import { anime } from "@maybecode/vue-next-animejs";
export default {
 setup() {
    onMounted(() => {
      anime({
        targets: ".test1",
        translateX: 120,
      });
      anime({
        targets: ".test2",
        translateX: 150,
      });
    });
    return {};
  },
};
```

---
_Source: https://npm.io/package/@maybecode/vue-next-animejs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._