小编Che*_* Ng的帖子

如何使用ReactCSSTransitionGroup在React中为元素高度设置动画?

我正在尝试用元素高度设置动画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将足以在任何地方重复使用它

reactjs actualheight reactcsstransitiongroup

20
推荐指数
2
解决办法
2万
查看次数