使用React.js的slideUp（）和slideDown（）动画

我创建了一个react组件，它由slideUp（）和slideDown（）动画组成。 我已经实现了使用jQuery slideup和slidedown方法。

我必须使用反应动画来实现此function。

我读到了ReactTransitionGroup和ReactCSSTransitionGroup 。 解释的方式告诉我，当DomNode安装到组件或卸载时我们可以执行此function（如果我错了，请纠正我）。

我的问题是 – >如何以反应方式执行slideup（）和slidedown（）而不使用jQuery。

请参阅此jsFiddle for https://jsfiddle.net/guc3yrm1/

PS – >请解释一下为什么这个反应动画部分看起来有点难以与jQuery相比（我是一个jQuery人）

var Hello = React.createClass({ getInitialState: function() { return { slide: false, } }, slide: function() { if (this.state.slide) { $(this.refs.slide).slideDown(); this.setState({ slide: false }); } else { $(this.refs.slide).slideUp(); this.setState({ slide: true }); } }, render: function() { return ( 
  
 
 
 
 ); } }); ReactDOM.render(  , document.getElementById('container') ); 

Answer 1

您可以在两个动画的API中实现动画。 这是主要区别：

ReactTransitionGroup是构建ReactCSSTransitionGroup的API。 两者之间的主要区别在于ReactTransitionGroup动画是用Javascript而不是CSS编写的，并且提供了一个回调，以便在动画完成时调用，而不是依赖于CSS转换事件。

我的结论是使用CSS动画来完成简单的任务，而Javascript则用于复杂的任务。

例如，如果组件具有静态高度 – 您可以通过CSS实现它，如下面的示例所示。 但如果宽度/高度是动态的，那么你可以用Javascript来做。 在Javascript示例中，我使用Velocity库来制作动画。 它的性能优于jQuery的动画 。 当然你可以自己实现动画，但为什么要重新发明轮子呢？

我已经使用这两个API实现了slideUp / slideDown。 请在下面查看。

（CSS）通过ReactCSSTransitionGroup实现：

 const CSSTransitionGroup = React.addons.CSSTransitionGroup; const TransitionGroup = React.addons.TransitionGroup; class Example extends React.Component{ constructor(props) { super(props); this.state = { visible: false }; this.handleClick = this.handleClick.bind(this) } handleClick() { this.setState({ visible: ! this.state.visible }); } render() { return 
 {this.state.visible ? 'Slide up' : 'Slide down'}  { this.state.visible ? 
 : null }  
 } } React.render(, document.getElementById('container')); 

 .panel { width: 200px; height: 100px; background: green; margin-top: 10px; } .example-enter { height: 0px; } .example-enter.example-enter-active { height: 100px; -webkit-transition: height .3s ease; } .example-leave.example-leave-active { height: 0px; -webkit-transition: height .3s ease; } 

Answer 2

如果你（像我一样）来到这里寻找jQuery的slideDown / slideUp替代品，那么react-slidedown似乎是一个易于使用的反应组件。 它的github页面有一个演示和示例代码 。

Answer 3

按照Jordan Enev的要求，我分叉了他的JSFiddle。

这是一个不需要React Css Transition Group的解决方案。 我个人是class级切换的粉丝。 那就是你可以创建css动画但是你喜欢它。

https://jsfiddle.net/fyuh32je/3/

（小提琴中的整个代码）

 class Example extends React.Component{ constructor(props) { super(props); this.state = { visible: 'panel' }; this.handleClick = this.handleClick.bind(this) } handleClick() { this.setState({ visible: this.state.visible == 'panel'? 'panel visible' : 'panel' }); } render() { return 
 {!this.state.visible == 'panel' ? 'Slide up' : 'Slide down'} 
 
This is some dynamic content!
 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 
 
 } } React.render(, document.getElementById('container')); 

我知道使用像这样的可见状态变量很脏，但是我在工作并且没有太多时间来改变太多。 请注意，我们使用visible类来切换带有动画的div容器。

一般来说。 动态高度容器可以使用css中的max-height属性的hacky用法进行动画处理。