# weex-animation

> weex-animation

Latest version **1.0.2** (published 2017-08-09) · 0 weekly downloads

## Install

```sh
npm install weex-animation
pnpm add weex-animation
yarn add weex-animation
bun add weex-animation
```

## 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.2 |
| Published | 2017-08-09 |
| First published | 2017-07-20 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 6.0.0 |
| Dependencies | 2 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | hacke2 |
| Maintainers | hacke2 |
| Keywords | weex-animation, weex |

## Links

- npm: https://www.npmjs.com/package/weex-animation
- Repository: https://github.com/hacke2/weex-animation
- Homepage: https://github.com/hacke2/weex-animation#readme
- Issues: https://github.com/hacke2/weex-animation/issues
- npm.io page: https://npm.io/package/weex-animation

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.1.10
- [weex-vue-render](https://npm.io/package/weex-vue-render.md) ^0.11.46

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 1.0.2 (latest) — 2017-08-09
- 1.0.1 — 2017-08-09
- 1.0.0 — 2017-07-24
- 0.0.1 — 2017-07-20

## README

# weex-animation

demo: http://www.hacke2.cn/weex-animation/

like animation.css for weex.

Use weex playground scan:

![playground](https://user-images.githubusercontent.com/6399899/28513090-4e80085c-7087-11e7-97bd-2fceaa6acf1d.png)

![native](https://user-images.githubusercontent.com/6399899/28513092-4eb30bb2-7087-11e7-9bb9-39ec2ba821da.png)


## getting start

```bash
npm install weex-animation --save
```

## use case

```js
import animation from 'weex-animation';

animation.fadeIn(el);

```

you should add exclude 'weex-animation' to vue/js loader, because it should build in your project. like this:

```js
  {
    test: /\.vue(\?[^?]+)?$/,
    loaders: ['weex-loader'],
    exclude: function(modulePath) {
      return /node_modules/.test(modulePath) && !/weex-animation/.test(modulePath);
    }
  },
  {
  test: /\.js$/,
  loaders: ['babel-loader'],
  exclude: function(modulePath) {
      return /node_modules/.test(modulePath) && !/weex-animation/.test(modulePath);
    }
  }

```

## animation function 

- [ ] bounce
- [x] flash
- [x] pulse
- [ ] rubberBand
- [x] shake
- [ ] headShake
- [ ] swing
- [ ] tada
- [ ] wobble
- [ ] jello
- [ ] bounceIn
- [ ] bounceInDown
- [ ] bounceInLeft
- [ ] bounceInRight
- [ ] bounceInUp
- [ ] bounceOut
- [ ] bounceOutDown
- [ ] bounceOutLeft
- [ ] bounceOutRight
- [ ] bounceOutUp
- [x] fadeIn
- [x] fadeInDown
- [x] fadeInDownBig
- [x] fadeInLeft
- [x] fadeInLeftBig
- [x] fadeInRight
- [x] fadeInRightBig
- [x] fadeInUp
- [ ] fadeInUpBig
- [x] fadeOut
- [ ] fadeOutDown
- [ ] fadeOutDownBig
- [ ] fadeOutLeft
- [ ] fadeOutLeftBig
- [ ] fadeOutRight
- [ ] fadeOutRightBig
- [ ] fadeOutUp
- [ ] fadeOutUpBig
- [ ] flipInX
- [ ] flipInY
- [ ] flipOutX
- [ ] flipOutY
- [ ] lightSpeedIn
- [ ] lightSpeedOut
- [ ] rotateIn
- [ ] rotateInDownLeft
- [ ] rotateInDownRight
- [ ] rotateInUpLeft
- [ ] rotateInUpRight
- [ ] rotateOut
- [ ] rotateOutDownLeft
- [ ] rotateOutDownRight
- [ ] rotateOutUpLeft
- [ ] rotateOutUpRight
- [ ] hinge
- [ ] jackInTheBox
- [ ] rollIn
- [ ] rollOut
- [x] zoomIn
- [ ] zoomInDown
- [ ] zoomInLeft
- [ ] zoomInRight
- [ ] zoomInUp
- [x] zoomOut
- [ ] zoomOutDown
- [ ] zoomOutLeft
- [ ] zoomOutRight
- [ ] zoomOutUp
- [ ] slideInDown
- [ ] slideInLeft
- [ ] slideInRight
- [ ] slideInUp
- [ ] slideOutDown
- [ ] slideOutLeft
- [ ] slideOutRight
- [ ] slideOutUp


## npm scripts


```bash
# build the two js bundles and watch file changes
npm run dev

```

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