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

Question

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

Answer 1

经过一些实验,我通过使用低级API ReactTransitionGroup而不是高级API 来提出解决方案ReactCSSTransitionGroup

这是JSFiddle的工作解决方案:http://jsfiddle.net/cherrry/0wgp34cr/

在动画之前,它正在做三件事:

1. 获得计算的高度,填充和边距
2. 隐藏元素display: none并添加.anim-enter到设置高度为0
3. 为...创建css规则 .anim-enter-active

要开始动画,它正在做两件事:

1. 取消隐藏元素
2. 添加.anim-enter-active以启动动画

JSFiddle中的一些数字和类名是硬编码的,但它应该很容易将"mixin"转换为React类作为替代 ReactCSSTransitionGroup

Answer 2

我遇到了同样的问题,最终为动画高度编写了一个独立的组件.

你可以在这里看到演示:https: //stanko.github.io/react-animate-height/

它更容易使用,整个库真的很小(约200行)

<AnimateHeight
  duration={ 500 }
  height={ 'auto' }
>
  <h1>Your content goes here</h1>
  <p>Put as many React or HTML components here.</p>
</AnimateHeight>

对于无耻的自我推销感到抱歉,但我认为如果您有多个组件可以动画,它可以为您节省大量时间.

干杯!