ReactTransitionGroup挂钩中的回调是什么?

费利克斯·D。

React.js为动画提供了一个低级API,称为ReactTransitionGroup在文档中指出,对钩componentWillAppearcomponentWillEntercomponentWillLeave,一个回调函数作为参数传递。

我的问题是,此回调究竟是什么以及如何传递给这些钩子,文档没有对这些回调说任何话,只是动画会延迟直到它们被调用为止。

塔希尔·艾哈迈德(Tahir Ahmed)

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

让我知道是否有任何不清楚的地方,我很乐意分享我所知道的。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章