const cstransitiongroup=React.addons.cstransitiongroup；
const TransitionGroup=React.addons.TransitionGroup；
类示例扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={visible:false}；
this.handleClick=this.handleClick.bind（this）
}
handleClick（）{
this.setState（{visible:！this.state.visible}）；
}
render（）{
返回
{this.state.visible？'Slide-up'：'Slide-down'}
{this.state.visible？：null}
}
}
React.render（，document.getElementById（'container'）
.panel{
宽度：200px；
高度：100px；
背景：绿色；
边缘顶部：10px；
}
.输入示例{
高度：0px；
}
.example-enter.example-enter-active{
高度：100px；
-webkit过渡：高度。3s轻松；
}
.example-leave.example-leave-active{
高度：0px；
-webkit过渡：高度。3s轻松；
}
应乔丹·埃涅夫的要求，我用叉子叉了他的胳膊
这里有一个解决方案，它不需要任何转换组。
我个人是班级服装的爱好者。也就是说，你可以创建css动画，无论你喜欢它是什么
（小提琴中的整个代码）
类示例扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={visible:'panel'}；
this.handleClick=this.handleClick.bind（this）
}
handleClick（）{
this.setState（{visible:this.state.visible=='panel'？'panel visible'：'panel'}）；
}
render（）{
返回
{！this.state.visible=='panel'？'Slide up'：'Slide down'}
这是一些动态内容
知识产权是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利elitr说，这是一个暂时的不可侵犯的事实，它是一个不可侵犯的事实，它是一个不可侵犯的事实
}
}
React.render（，document.getElementById（'container'）；
我知道这样使用visible state变量是不好的，但是我正在工作，没有太多的时间去改变太多。请注意，我们使用visible类通过动画切换div容器
一般来说。动态高度容器可以使用css中的max height属性设置动画 如果您（像我一样）来这里寻找一个react替代jQuery的slideDown
/slideUp
，那么似乎是一个易于使用的react组件。它的github页面有一个演示和示例代码 只是好奇：你为什么不想在这里使用jQuery？@Chris我可以在jQuery的帮助下做到这一点。我很好奇如何在react组件的静态内容的reactTransitionAPI中实现这一点。最终，我们可以通过使用react Way避免不必要的重新渲染。如果面板没有固定高度怎么办？.Invisible{max height:0%；overflow:hidden；}.visible{max-h
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 (
<div>
<input type = "button" value = "clickme" onClick = {this.slide}/>
<br />
<br />
<div className = "slide" ref="slide" >< /div>
</div>
);
}
});
ReactDOM.render( < Hello name = "World" / > ,
document.getElementById('container')
);
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 <div>
<button onClick={this.handleClick}>{!this.state.visible == 'panel' ? 'Slide up' : 'Slide down'}</button>
<div className={this.state.visible}>
<p>This is some dynamic content!</p>
<p>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.</p>
</div>
</div>
}
}
React.render(<Example />, document.getElementById('container'));