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 = {
 moment: 2500, // 初始值
 };
 }
 componentDidMount() {
 setTimeout(() => {
 this.setState({
 moment: 200,
 });
 }, 1000);
 }
 render() {
 return (
 <div>
 <div>moment初始为2500,所以第一个时间已过,而且第二个已播了1000</div>
 <Tween
 animation={[{ marginLeft: '500px', duration: 1500 }, { y: 300, duration: 5000 }]}
 moment={this.state.moment}
 style={{ opacity: 1, height: 500, transform: 'translate(50px,30px)' }}
 >
 <div>执行动效</div>
 </Tween>
 </div>);
 }
}
ReactDom.render(<Demo />, document.getElementById('__react-content'));
Fork me on GitHub

AltStyle によって変換されたページ (->オリジナル) /