React 组件的简单转换

Question

我有一个 React 组件，我 show/hide 基于其 parent 组件中的按钮切换。除了页面上的 appearing/disappearing，我还想为组件的安装和卸载设置动画，使其看起来好像从 parent 滑落，然后滑回 parent。 parent 始终可见。

一个重要的注意事项是第一个 child 中也有组件。我的一项涉及 CSS 转换的尝试导致这些 children 在第一个 child 滑动 up/down 时卡在原地。此外，Child 没有固定高度 -- 它可以是 100px 或 1000px。

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

Answer 1

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

Answer 2

我终于用一个叫做 react-animate-height 的小包解决了这个问题。

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

Simple transition for React component