React.js为动画提供了一个低级API,称为ReactTransitionGroup。在文档中指出,对钩componentWillAppear
,componentWillEnter
和componentWillLeave
,一个回调函数作为参数传递。
我的问题是,此回调究竟是什么以及如何传递给这些钩子,文档没有对这些回调说任何话,只是动画会延迟直到它们被调用为止。
首先,我还在学习ReactJS,所以我的方法可能会出错,而其他情况可能不会。为此提前致歉。
打开“开发人员工具”的console
窗口,分析我刚才制作的这个jsFiddle示例。观察调用回调的顺序。
我TweenMax
习惯对框进行一些动画处理,以使其在单击按钮时显示或消失。
该低级API公开为我们利用了不少有用的回调。共享的示例演示了这些回调的用法。
JavaScript:
var ReactTransitionGroup = React.addons.TransitionGroup;
var MyBox = React.createClass({
show: function(callback){
var node = React.findDOMNode(this);
TweenMax.fromTo(node, 2, { width: 100, height: 100, backgroundColor: '#0cc', scale: 0.2, opacity: 0, rotation: -180 }, { width: 100, height: 100, backgroundColor: '#0cc', scale: 1, opacity: 1, rotation: 0, ease: Expo.easeInOut, onComplete: callback, onCompleteScope: this });
},
hide: function(callback){
var node = React.findDOMNode(this);
TweenMax.to(node, 2, { width: 100, height: 100, backgroundColor: '#cc0', scale: 0.2, opacity: 0, ease: Expo.easeInOut, onComplete: callback, onCompleteScope: this });
},
componentWillAppear: function(didAppearCallback){
console.log('MyBox.componentWillAppear');
this.show(didAppearCallback);
},
componentDidAppear: function(){
console.log('MyBox.componentDidAppear');
},
componentWillEnter: function(didEnterCallback){
console.log('MyBox.componentWillEnter');
this.show(didEnterCallback);
},
componentDidEnter: function(){
console.log('MyBox.componentDidEnter');
},
componentWillLeave: function(didLeaveCallback){
console.log('MyBox.componentWillLeave');
this.hide(didLeaveCallback);
},
componentDidLeave: function(){
console.log('MyBox.componentDidLeave');
},
componentDidMount: function() {
console.log('MyBox.componentDidMount');
},
componentWillUnmount: function() {
console.log('MyBox.componentWillUnmount');
},
render: function(){
return <div> </div>;
}
});
var Container = React.createClass({
getInitialState: function(){
return { isShowing: false };
},
onButtonClicked: function(){
this.setState({ isShowing: !this.state.isShowing });
},
render: function(){
var myBox = this.state.isShowing ? <MyBox key="myBox" /> : '';
return (
<div id="container">
<MyButton onButtonClicked={this.onButtonClicked} />
<ReactTransitionGroup transitionName="hellotransition">
{myBox}
</ReactTransitionGroup>
</div>
);
}
});
var MyButton = React.createClass({
render: function(){
return <button onClick={this.props.onButtonClicked}>Click Me</button>;
}
});
//
React.render(<Container />, document.body);
让我知道是否有任何不清楚的地方,我很乐意分享我所知道的。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句