jQuery和ReactJS仅动画

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
。