我正在尝试用元素高度设置动画ReactCSSTransitionGroup
,所以这就是我想要的动画效果:
http://jsfiddle.net/cherrry/hgk4Lme9/
问题是,我总是不知道该元素的高度,所以我试图破解scrollHeight
,clientHeight
期间或类似的东西componentDidMount
,并尝试设置node.style.height
或规则添加到样式表
http://jsfiddle.net/cherrry/dz8uod7u/
让动画看起来很好,但是当元素进入时,它会闪现一点,缩放动画看起来很奇怪
应该是因为询问node.scrollHeight
导致渲染立即发生,所以无论如何都要获得相同的信息并在动画开始之前注入css规则?或者我应该考虑其他方式?
我对max-height
解决方案不是很满意,因为当max-height
不接近或小于时,结果动画速度将非常奇怪height
,并且我的组件的高度确实变化很大.
我可以想象最终的解决方案可能有点混乱,但我认为将它变成一个Mixin将足以在任何地方重复使用它