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 中的任何子组件动画到主视图并不是很困难强>生命周期事件。

但是，当我们想要从主视图中为 out 我们的子组件设置动画时，这样做很棘手，因为相应的 componentWillUnmount 生命周期事件触发之后我们的视图实际上已卸载，并且之前没有可用的事件。即使有，我们也必须从内部或从主视图中手动删除我们的子组件。我最初考虑使用 React.unmountComponentAtNode 做同样的事情，但后来想出了另一种方法。

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

希望这有帮助。

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

更新＃1：

Wah wah vee va！

事实上，我正在更多地挖掘ReactJS，特别是它的动画部分，看看我发现了什么，他们暴露了 plethora 。

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

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

看看这个经过修改的 low-level API for transition events 做同样的事情，但这一次使用内部回调，例如 jsFiddle 和 componentWillEnter

jQuery和ReactJS ONLY动画

1 个答案: