React组件的简单过渡

Question

我有一个React组件，我根据其父组件内部的按钮切换来显示/隐藏。 我不只是要在页面上显示/消失，还希望对组件的安装和卸载进行动画处理，以使其看起来像是从父级滑落并滑回父级。 父母总是可见的。

一个重要的注意事项是，第一个孩子中还包含一些组件。 我涉及CSS过渡的尝试之一导致这些孩子在第一个孩子向上/向下滑动时被卡在适当的位置。 此外，Child没有固定的高度-可以是100px或1000px。

这是我在应用程序中唯一的动画，所以我真的不想增加任何东西来驱动它。 我正在努力寻找其他人正在使用这种东西。

Answer 1

对于那种简单的动画，我通常使用CSSTransation 。 这个想法很简单，该组件将根据组件状态（安装，卸载等）将一些类附加到您的元素上，并且您必须为动画提供css。

Answer 2

我终于用一个名为react-animate-height的小程序包解决了这个问题。

<div>
  <AnimateHeight
    duration={ 500 }
    height={ height } 
  >
    <Child />
  </AnimateHeight>
</div>