ReactTransitionGroup钩子中的回调是什么？

Question

React.js为名为ReactTransitionGroup的动画提供了一个低级API .在文档中声明,对于钩子componentWillAppear,componentWillEnter并且componentWillLeave,回调作为参数传递.

我的问题是,这个回调究竟是什么以及如何将它传递给那些钩子,文档并没有说出那些回调,除了动画被延迟直到被调用.

Answer 1

首先,我还在学习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>&nbsp;</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);

如果有什么不清楚,请告诉我,我很乐意分享我所知道的.