jQuery和ReactJS ONLY动画

Question

我只需要使用jQuery动画,请不要提及过渡.

这是我的代码库

var CommentForm = React.createClass({

    componentWillUnmount: function(cb) {
        console.log('hiding')
        jQuery(this.getDOMNode()).slideUp('slow', cb);
        console.log((this.getDOMNode()))
    },

    componentDidMount: function() {

        jQuery(this.getDOMNode()).hide().slideDown('slow');

        if (this.props.autofocus) {
            jQuery(this.refs.commentArea.getDOMNode()).focus();
        }

    },

    render: function() {
        return (
            <div>
                <div className="panel-footer" ref="commentComponent">
                    <form role="form">
                        <div className="form-group">
                            <textarea className="form-control" placeholder="Say something nice!" ref="commentArea"></textarea>
                        </div>
                        <div className="pull-right">
                            <button className="btn btn-default btn-md" type="button"><span className="fa fa-comment"></span> Comment</button>
                        </div>
                        <div className="clearfix"></div>
                    </form>
                </div>
            </div>
        );
    }

});

正如您所看到的,我可以在安装组件时添加一个非常棒的动画,但我无法使用动画卸载组件,就像我在代码中提到的那样.

有没有想过如何使用jQuery做到这一点？和Reactjs组件生命周期？

Answer 1

以下是我尝试使用过于简单的演示解决此问题.

jsFiddle.

JavaScript的:

var Container = React.createClass({
    onClicked: function() {
        console.log('Container.onClicked');
        if(this.state.isShowing){
            this.refs.myHelloWorld.hide();
        } else {
            this.setState({ isShowing: true });
        }
    },
    onAnimationComplete: function() {
        console.log('Container.onAnimationComplete');
        this.setState({ isShowing: false });
    },
    getInitialState: function() {
        return { isShowing: false };
    },
    render: function() {
        var helloWorld = this.state.isShowing ? <Hello name="World!" onComplete={this.onAnimationComplete} ref="myHelloWorld" /> : '';
        return (
            <div id="container">
                <MyButton onButtonClicked={this.onClicked}/>
                {helloWorld}
            </div>
        );
    }
});

var MyButton = React.createClass({
    render: function() {
        return <button onClick={this.props.onButtonClicked}>Toggle</button>;
    }
});

var Hello = React.createClass({
    hide: function() {
        console.log('Hello.hide');
        var that = this;
        $(React.findDOMNode(this)).stop(true).fadeOut({
            duration: 1200,
            complete: function() {
                that.props.onComplete();
            }
        });
    },
    componentDidMount: function() {
        console.log('Hello.componentDidMount');
        $(React.findDOMNode(this)).stop(true).hide().fadeIn(1200);
    },
    componentWillUnmount: function() {
        console.log('Hello.componentWillUnmount');
    },
    render: function() {
        return <div>Hello { this.props.name }</div>;
    }
});
React.render(<Container />, document.body);

正如你已经想通了,这是不是很难任何动画子组件中通过使用主视图componentDidMount生命周期事件.

然而,这是棘手的做同样的,当我们要进行动画了,从我们主要考虑到我们孩子的组件,因为相应的componentWillUnmount生命周期事件触发后,我们认为有实际未安装,并且没有可用的,我们可以在这之前使用事件.即使有,我们也必须从内部或从主视图中手动删除我们的子组件.我最初React.unmountComponentAtNode想要使用同样的方法,但后来想出了另一种方法.

解决方案是首先将主视图中的回调发送到子组件作为稍后将使用的参数.然后,我们调用子组件这将动画的另一种方法进行组件的DOM节点本身.最后,当动画完成时,我们将触发我们之前收到的相同回调.

希望这可以帮助.

PS这种方法并没有受到jQuery animate()和相关方法的严格约束,相反,这种方法可以用于任何其他基于JS的动画库(我正在看我最喜欢的GSAP ;)),只要它们在动画时触发回调完成(GSAP提供了大量的).

更新#1:

哇哇哇哇哇!

事实上,我正在更多地挖掘ReactJS,特别是它的动画部分,看看我发现了什么,他们已经为转换事件公开了一个低级API.

因此,我们之前尝试使用自己的回调来完成的事情,以及props维护对etc的引用的对象,事实证明,它可以使用此API本身来完成.

我现在不太确定我是否真的非常喜欢它,因为我还没有在实际项目中实现这两种技术,但我很高兴我们现在有了可用的选项.我们可以使用内部API,或者我们可以按照之前的建议制作我们自己的解决方案.

看看这个修改过的jsFiddle做同样的事情,但这次使用内部回调,如componentWillEnter和componentWillLeave.