# transition-ani-js

> JavaScript transition engine for easy animations

Latest version **1.2.0** (published 2018-11-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install transition-ani-js
pnpm add transition-ani-js
yarn add transition-ani-js
bun add transition-ani-js
```

## 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.2.0 |
| Published | 2018-11-07 |
| First published | 2018-10-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 16.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | anderpang |
| Maintainers | anderpang |

## Links

- npm: https://www.npmjs.com/package/transition-ani-js
- npm.io page: https://npm.io/package/transition-ani-js

## Recent versions

- 1.2.0 (latest) — 2018-11-07
- 1.1.2 — 2018-10-09
- 1.1.1 — 2018-10-03
- 1.1.0 — 2018-10-02
- 1.0.0 — 2018-10-01

## README

# Transition.js
JavaScript transition engine for easy animations

## npm

```bash

$ npm install transition-ani-js

```

```javascript
   var sprite = {};
   var from = {
		 x: 0,
		 y: 0
   };
   var to={
	   x: 100,
	   y: 100
   };

   new Transition(sprite,from).to(to);
```

```javascript
var values = { x: 0, y: 0 };
var trans = new Transition(values)
	.to({ x: 100, y: 100 }, 1000)
	.on("update",function(target) {
		console.log(target.x, target.y);
	})
	.start();

requestAnimationFrame(animate);

function animate(time) {
	requestAnimationFrame(animate);
	Transition.update(time);
}
```
```javascript
var trans = new Transition({ x: 0, y: 0 })
	.to({ x: 100, y: 100 }, 1000)
	.to({ x: 100, y: "+100"},{ duration: 2000, delay: 1000 })
	.on("update",function(target) {
		console.log(target.x, target.y);
	})
	.start();

requestAnimationFrame(animate);

function animate(time) {
	requestAnimationFrame(animate);
	Transition.update(time);
}
```


### Show
<a href="http://htmlpreview.github.io/?https://github.com/anderpang/transitionjs/blob/master/index.html" target="_blank">index.html</a>

<a href="http://htmlpreview.github.io/?https://github.com/anderpang/transitionjs/blob/master/index.html" target="_blank">demo.html</a>

### Transition.Easing

缓动算法引用tween.js

Linear:{None: ƒ}

Quad:{In: ƒ, Out: ƒ, InOut: ƒ}

Cubic:{In: ƒ, Out: ƒ, InOut: ƒ}

Back:{In: ƒ, Out: ƒ, InOut: ƒ}

Bounce:{In: ƒ, Out: ƒ, InOut: ƒ}

Circ:{In: ƒ, Out: ƒ, InOut: ƒ}

Elastic:{In: ƒ, Out: ƒ, InOut: ƒ}

Expo:{In: ƒ, Out: ƒ, InOut: ƒ}

Quart:{In: ƒ, Out: ƒ, InOut: ƒ}

Quint:{In: ƒ, Out: ƒ, InOut: ƒ}

Sine:{In: ƒ, Out: ƒ, InOut: ƒ}

### Transition.Events

```javascript
{
    "START": "start",
    "UPDATE": "update",
    "NEXT": "next",
    "COMPLETE": "complete",
    "STOP": "stop",
    "REPEAT": "repeat"
}
```

### Transition Methods
```javascript
   Transition.play();
   Transition.pause();
   Transition.update(time);

   console.log(Transition.now());
   
   doument.addEventListener("visibilitychange",function(){
        if(document.hidden)
	{
	    Transition.pause();
	}
	else
	{
	    Transition.play();
	}
   },false);

   Transition.delay(function(){
	   console.log("3秒后执行");
   }，3000);
```


### Methods
```javascript
transition.start();
transition.play();
transition.pause();
transition.stop();
transition.update();

transition.yoyo(boolean);
transition.repeat(int);

```

timeline:

  |-------------------|---------------------|
 
 start() &emsp; &emsp; &emsp; &emsp;pause()/play()  &emsp; &emsp; &emsp; &emsp; &emsp;       stop()
 
### properties:
```javascript
tarnsition.paused    //true or false
````

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