jQuery和ReactJS ONLY动画

我只需要使用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 ( 
 
 
 
  
 
  Comment 
 
 
 
 
 ); } }); 

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

有没有想过如何使用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 ?  : ''; return ( 
  {helloWorld} 
 ); } }); var MyButton = React.createClass({ render: function() { return Toggle; } }); 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 
Hello { this.props.name }
; } }); React.render(, document.body); 

正如您已经发现使用componentDidMount生命周期事件将任何子组件设置到主视图中并不是很困难。

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

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

希望这可以帮助。

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

更新＃1：

Wah wah vee va！

所以当它发生时，我正在更多地挖掘ReactJS，特别是它的动画部分，看看我发现了什么，他们已经为转换事件公开了一个低级API 。

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

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

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