import React, { Component } from 'react'; import Animate from 'react-smooth'; class SimpleAnime extends Component { constructor(props) { super(props); this.state = { from : -400, to: -400 }; } handleClick() { if(this.state.to == this.state.from) { this.setState({ from: -400, to: -5 }); } else { this.setState({ from: this.state.to, to: this.state.from }); } } render() { return ( <div className="simple"> <button onClick={this.handleClick.bind(this)}>click me!</button> <Animate from={{ x: this.state.from }} to={{ x: this.state.to }}> {({ x }) => ( <div style={{ width: 300, height: 800, backgroundColor: 'green', transform: `translate(${x}px, 0)`, }} > </div> )} </Animate> </div> ); } } export default SimpleAnime;