我只需要使用 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 组件生命周期？

最佳答案

这是我尝试使用过于简单的演示来解决这个问题。

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 生命周期事件触发 在 我们的 View 实际上已卸载并且在此之前没有可用的事件可供我们使用。即使有，我们也必须手动从其内部或从主视图中删除我们的子组件。我最初考虑使用 React.unmountComponentAtNode 做同样的事情，但后来想出了另一种方法。

解决方案是先从主视图向子组件发送回调作为参数，稍后使用。然后我们调用子组件的另一个方法，该方法将 out 组件的 DOM 节点本身。最后，当动画完成时，我们将触发我们之前收到的相同回调。

希望这对您有所帮助。

附言这种方法不受 jQuery 的 animate() 和相关方法的严格约束，相反，这种方法可以用于任何其他基于 JS 的动画库(我正在查看我的最喜欢的 GSAP ;))，只要它们在动画完成时触发回调(并且 GSAP 提供了一个 plethora 他们)。

更新#1:

哇哇哇!

因此，碰巧的是，我更多地挖掘了 ReactJS，尤其是它的动画部分，看看我发现了什么，他们公开了一个 low-level API for transition events .

所以我们之前试图用我们自己的回调来完成的事情，我们的 props 对象维护对 etc 的引用，事实证明，它可以使用这个 API 本身来完成。

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

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

关于javascript - 仅 jQuery 和 ReactJS 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31353966/