react-anix
Super easy and lightweight transitions animation library for React.
Overview
react-anix extended from the AniX library. It is a lightweight and easy-to-use animation library for React with excellent performance and good compatibility for modern browsers.
It uses the native css transition attribute, better than js simulation animation performance.
For more information and demo please see https://drawcall.github.io/AniX/.
Install and Usage
Quick Start Install and manage react-anix with npm.
$ npm install react-anix --save
import and use the react-anix library.
//1. import module
import { Anix } from 'react-anix';
<Anix
anis = {[
{ left: '120px', background: '#000', time: .5 },
{ background: color, width: 0, time: .5, onComplete: this.aniComplete.bind(this), disAppear: true },
{ time: .5, from: { width: '0px' }, to: { width: '350px', background: color, delay: .1 }, appear: true }
]}
or
ani={{ left:'20px', time:.5, delay: 1 }}
or
appear={{ left:'20px', time:.5 }}
control animation play
play={this.state.play}
>
...
</Anix>
Appear Animation
<Anix appear={{ left:'120px', time:.5 , delay:.1, ease:'easeBackOut'}}>
{items}
</Anix>
or
let appear = {time: .5, from: { width: '0px' }, to: { width: '350px' }}
<Anix appear={appear}>
{items}
</Anix>
DisAppear Animation
onComplete(){}
...
<Anix disAppear={{ width:'0px', time:.5 , onComplete:this.onComplete.bind(this) }}>
{items}
</Anix>
Control Animation
<Anix ani={{ background:'#ffcc00', time:.5 }} play={this.state.play}>
{items}
</Anix>
//control animation play
this.setState({ play:true });
About anis prop
Appear DisAppear and Control ani write together
<Anix
anis = {[
{ left: '120px', background: '#000', time: .5 },
{ background: color, width: 0, time: .5, onComplete: this.aniComplete.bind(this), disAppear: true },
{ time: .5, from: { width: '0px' }, to: { width: '350px', background: color, delay: .1 }, appear: true }
]}
>
{items}
</Anix>
about init prop
The init prop is used to control whether the default initial child is animated
<Anix appear={{ width:'120px', time:.5}} init={true}>
{items}
</Anix>
More direct to control the animation use refs
//Note the case
import { Anix, AniX } from 'react-anix';
...
//use refs
animate(){
AniX.to(this.refs.title, .5, {width:'500px'});
}
...
<div className="red" ref="title">hello</div>
Test and Build
$ cd test
$ npm install
$ npm start