jQuery和ReactJS ONLY动画 [英] jQuery and ReactJS ONLY animations
问题描述
我只需要使用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（）{
返回（
< div>
< div className =panel-footerref =commentComponent>
< form role =form>
< div className =form-group>
< textarea clas sName =form-controlplaceholder =说些好听的！ref =commentArea>< / textarea>
< / div>
< div className =pull-right>
< button className =btn btn-default btn-mdtype =button>< span className =fa fa-comment>< / span>注释和LT; /按钮>
< / 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.isS怎么样？< 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'）;
}，
渲染：function（）{
return< div> Hello {this.props.name}< / div> ;;
}
}）;
React.render（< Container />，document.body）;
您已经发现为任何子组件制作动画并不困难 使用 componentDidMount 生命周期事件。
然而，做同样的事情也很棘手当我们想要从主视图中为 out 动画我们的子组件时，因为相应的 componentWillUnmount 生命周期事件触发 > 我们的视图实际上已卸载，并且在此之前没有可用的事件。即使有，我们也必须从内部或从主视图中手动删除我们的子组件。我最初想的是使用 React.unmountComponentAtNode 做同样的事情，但后来想出了另一种方式。
解决方案是首先发送一个回调从主视图到子组件作为稍后将使用的参数。然后，我们调用子组件的另一种方法，该方法可以为组件的DOM节点本身设置 out 。然后最后，当动画完成时，我们将触发我们之前收到的相同回调。
希望这会有所帮助。
PS这种方法不受jQuery的 animate（） 和相关方法的严格约束，相反，这种方法可用于任何其他基于JS的动画库（我正在查看我最喜欢的 GSAP ;）），只要他们在动画时触发回调已完成（ GSAP 提供 过多 其中）。
更新＃1：
<哇哇哇哇哇哇哇！
所以当它发生时，我更多地挖掘ReactJS，特别是它的动画部分，看看我发现了什么，它们暴露了一个 转型事件的低级API 。
所以我们之前用自己的回调试图完成的事情，以及我们的道具 o事实证明，可以使用此API本身来完成维护对等的引用。
我现在还不确定我是否真的很喜欢它，因为我还没有在实际项目中实现这两种技术，但我很高兴我们现在有选择。我们可以使用内部API，或者我们可以按照之前的建议制作我们自己的解决方案。
看看这个修改后的 jsFiddle 做同样的事情，但这一次使用内部回调，例如 componentWillEnter 和 componentWillLeave 。
I ONLY need to use jQuery animations, please do not mention the transitions.
This is my code base
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>
);
}
});
So as you may see, I could add an awesome animation when the component is mounted, but I cannot unmount the component with the animation as I have mentioned on the code.
Any thoughts how to do this just with jQuery ? and Reactjs Component Life Cycle ?
Here is my attempt in solving this issue using an overly simplistic demonstration.
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);
As you have figured out that it is not very difficult to animate any child component in to the main view by using componentDidMount life-cycle event.
However, it is tricky to do the same when we want to animate out our child component from our main view because the corresponding componentWillUnmount life-cycle event triggers after our view has actually un-mounted and there is no event available that we could use before that. And even if there was, we would have then had to manually remove our child component either from within itself or from the main view. I was initially thinking of using React.unmountComponentAtNode to do just the same but then figured out another way.
The solution is to first send a callback from main view to the child component as a parameter that would be used later. We then call child component's another method which would animate out the component's DOM node itself. And then finally, when the animation is complete, we would trigger the same callback that we received earlier.
Hope this helps.
P.S. This approach is not tightly bound by jQuery's animate() and related methods but instead, this approach can be used for any other JS-based animation libraries (I am looking at my favourite GSAP ;)), as long as they trigger a callback when the animation is completed (and GSAP provides a plethora of them).
Update #1 :
Wah wah vee va!
So as it happens, I was digging ReactJS more and especially its animation parts and look what I found, they have exposed a low-level API for transition events.
So that thing we were trying to accomplish earlier with our own callbacks, and our props object maintaining a reference to etc, it turns out, it can be done using this API itself.
I am not exactly sure if I really like it very much at the moment because I am yet to implement both of these techniques in real project but I am happy that we now have options available. We can use the internal API, or we can cook our own solution as proposed earlier.
Take a look at this modified jsFiddle doing the same thing but this time using the internal callbacks such as componentWillEnter and componentWillLeave.
这篇关于jQuery和ReactJS ONLY动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
