react-animation-engine
Version:
Extract famo.us transitionable capabilities in 14kb for react. Mixin to transition between state values.
61 lines (53 loc) • 1.54 kB
HTML
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.2/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.2/JSXTransformer.js"></script>
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="../build/global/FamousAnimations.js"></script>
</head>
<body>
<script type="text/jsx">
var TransitionableMixin = FamousAnimations.TransitionableMixin;
var Easing = FamousAnimations.Easing;
var TestComponent = React.createClass({
mixins: [TransitionableMixin(["width", "height"])],
getInitialState() {
return {
width: 200,
height: 50
}
},
handleClick() {
this.width = {
value: document.body.clientWidth / 2,
duration: 5000
};
this.height = {
value: document.body.clientHeight / 2,
duration: 2000,
curve: Easing.outCirc
};
},
handleStop() {
this.halt();
},
render() {
return (
<div>
<button onClick={this.handleClick}>click me</button>
<button onClick={this.handleStop}>Stop</button>
<div style={{
width: this.state.width,
height: this.state.height,
backgroundColor: 'blue',
color: "white"
}}>Loader</div>
</div>
)
}
});
React.render(<TestComponent/>, document.body);
</script>
</body>
</html>