React 组件的简单转换答案

【问题标题】：Simple transition for React componentReact 组件的简单转换
【发布时间】：2019-12-09 14:44:50
【问题描述】：

我有一个 React 组件，我根据其父组件内的按钮切换显示/隐藏它。我不想只是在页面上出现/消失，我想为组件的安装和卸载设置动画，使其看起来好像从父级滑下并滑回父级。父级始终可见。

一个重要的注意事项是在第一个孩子中也有组件。我的一个涉及 CSS 转换的尝试导致当第一个孩子向上/向下滑动时，这些孩子被卡在了原地。此外，Child 没有固定的高度——它可以是 100px 或 1000px。

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

酷，感谢您的指导。我再次尝试使用这种方法，并再次陷入为 Child 创建平滑幻灯片的过程中，同时还让 Child 的孩子用它滑动。你有什么指针可以达到这个效果吗？我刚刚使用了height 属性，但没有成功。作为一个额外的挑战，Child 没有固定的高度——它可能是 100 像素或 1000 像素。