Inline-Animation

Inline Animation by React. DEMO

##1. Install

npm install inline-animation --save

##2. Prepare slightly adjust any component you want to add animation effects

class AnyComponentYouWant extends Component {
	...
    render() {
		...
        return (
			//Keep everything the same, just change the style of root {to this.props.style} if you want the component itself trigger the animation, add any event listeners as {this.props.animation.bind(this)}
            <div style={this.props.style} onClick={this.props.animation.bind(this)} >
                ...
            </div>
        );
    }
}

##3. Usage In parent component:

import {InlineAnimation} from "inline-animation";
import AnyComponentYouWant from "./AnyComponentYouWant";
...
let style = {
	//Move any style you designed for AnyComponentYouWant before to here
}
let component = <AnyComponentYouWant />
return (
	<InAnimation action={this.state.action} direction={this.state.direction} component={component} style={style} destiny={this.state.destiny} />
)

##Effects Effect List: rotate left or right, move vertically, move horizontally, fade in or out, scale up or down, move to any coordinator.

rotate left or right:

<InAnimation component={component} style={style} action="rotate" direction="left" destiny="90" />
//direction should be left/right
//destiny is how much deg you want to rotate to the direction you want.

move vertically:

<InAnimation component={component} style={style} action="vertical" direction="top" destiny="90" />
//direction should be top/bottom
//destiny is how much px you want to move to the vertical direction you want.

move horizontally:

<InAnimation component={component} style={style} action="horizontal" direction="left" destiny="90" />
//direction should be left/right
//destiny is how much px you want to move to the horizontal direction you want.

fade in or out:

<InAnimation component={component} style={style} action="fade" direction="in" destiny="1" />
//direction should be in/out
//destiny should be between 0 to 1. 1 means completely fade in or fade out.

scale up or down:

<InAnimation component={component} style={style} action="scale" direction="up" destiny="0.5" />
//direction should be up/down
//destiny means the percentage you want to scale up or down. eg: 0.5 mean 50%.

move to any coordinator:

<InAnimation component={component} style={style} action="move" direction="center" destiny={[x,y]} />
//direction can only be center
//destiny means the coordinator you want to move to. Should be in [] like [90, 90].

Except attributes above: You can define steps="integer" to make animation more smooth, default is 20 You can define timer="integer" to increase animation duration, default and mininal is 10 You can define restrict="integer" to limited how many time the animation can happens.

#Other React UI components