我试图用ReactCSSTransitionGroup来动画元素高度,
所以这就是我想要的动画看起来像：
所以这就是我想要的动画看起来像：
http://jsfiddle.net/cherrry/hgk4Lme9/
问题是我不总是知道元素的高度,
所以我试图在componentDidMount中劫持scrollHeight,clientHeight或类似的东西,并尝试设置node.style.height或添加规则到样式表
http://jsfiddle.net/cherrry/dz8uod7u/
离开动画看起来不错,但是当元素进入时,它会闪烁一点,缩放动画看起来很奇怪
应该是因为要求node.scrollHeight导致渲染立即发生,所以有没有得到相同的信息,并在动画开始之前注入css规则？还是应该等一下呢？
我对max-height解决方案并不十分满意,因为当max-height不接近或小于height时,结果的动画速度将非常奇怪,而且我的组件的高度有很大差异.
我可以想象,最终的解决方案可能会有点凌乱,
但我认为将它变成一个Mixin将会很好地重用它在任何地方
经过更多的实验,我已经提出了一个解决方案,使用低级的API ReactTransitionGroup而不是高级别的ReactCSSTransitionGroup
原文链接：https://www.f2er.com/react/301188.html这是JSFiddle的一个工作解决方案：http://jsfiddle.net/cherrry/0wgp34cr/
在动画之前,它做了3件事情：
>获得计算的高度,填充和边距
>使用display：none隐藏元素,并添加.anim-enter将高度设置为0
>为.anim-enter-active创建css规则
要开始动画,它做了2件事情：
>取消隐藏元素
>添加.anim-enter-active启动动画
JSFiddle中的一些数字和类名称是硬编码的,但是应该很容易将“mixin”转换为React类作为ReactCSSTransitionGroup的替代
