rc-tween-one@2.7.3

tween-one anim component for react

import Tween from 'rc-tween-one';
import React from 'react';
import ReactDom from 'react-dom';
class Demo extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 paused: true,
 reverse: false,
 reverseDelay: 0,
 };
 }
 onPlay = () => {
 this.setState({
 paused: false,
 reverse: false,
 moment: null,
 });
 }
 onPause = () => {
 this.setState({
 paused: true,
 moment: null,
 });
 }
 onReverse = () => {
 this.setState({
 reverse: true,
 reverseDelay: 0,
 paused: false,
 moment: null,
 });
 }
 onReverseDelay = () => {
 this.setState({
 reverse: true,
 reverseDelay: 1000,
 paused: false,
 moment: null,
 });
 }
 onRestart = () => {
 this.setState({
 moment: 0,
 paused: false,
 reverse: false,
 });
 }
 onMoment = () => {
 this.setState({
 moment: 500,
 }, () => {
 this.setState({
 moment: null,
 });
 });
 }
 render() {
 return (
 <div>
 <div style={{ height: 200 }}>
 <Tween animation={[{ translateX: '500px', duration: 1000 }, { y: 100 }, { x: 100 }]}
 paused={this.state.paused}
 reverse={this.state.reverse}
 reverseDelay={this.state.reverseDelay}
 moment={this.state.moment}
 style={{ opacity: 1, width: 100, transform: 'translate(50px,30px)' }}
 >
 <div>执行动效</div>
 </Tween>
 </div>
 <button onClick={this.onPlay}>play</button>
 <button onClick={this.onPause}>pause</button>
 <button onClick={this.onReverse}>reverse</button>
 <button onClick={this.onReverseDelay}>reverse Delay 1000</button>
 <button onClick={this.onRestart}>restart</button>
 <button onClick={this.onMoment}>moment to 500</button>
 </div>);
 }
}
ReactDom.render(<Demo />, document.getElementById('__react-content'));