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>