0.0.1 • Published 7 years ago
inline-animation v0.0.1
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
0.0.1
7 years ago