在React中消除jsx元素的渲染

Question

我想知道是否可以對jsx元素的呈現進行去抖動。 我有一個面板擴展的動畫，其中包含一些內容。 如果面板為空（僅背景），則動畫是平滑的，並且按預期工作。 動畫和相關組件均來自Material-UI。 當內容已經在面板中時，就會出現問題，因此動畫（寬度擴展）只是跳到內容的寬度，使動畫看起來不穩定。 這是一個與我所指的相似的例子 。 該代碼是我在面板中使用的代碼，它們在擴展方面的作用相同。 唯一不同的是，此示例中的內容只是lorem ipsum，因此動畫看起來可以正常工作。 是否可以像這樣對<CardContent />組件的呈現進行去抖動？

{ open &&
  (
    _.debounce(e => {
      return (
        <CardContent>
          {/*content in here*/}
        </CardContent>
      )
    }, 300)
  )
}

或類似的操作（這不起作用），以便在呈現內容之前通過動畫完全擴展面板？

Answer 1

我想添加一條評論，但是我的聲譽尚未高於50，所以我不能：p。

JS動畫

要回答您的問題，如果您使用的是GSAP或AnimeJS類的JavaScript動畫，則可以設置一個狀態標志。 isAnimating = null 。 然后，當動畫開始時，將標志設置為true ，完成時將其設置為false 。 然后在您的render()方法中編寫一個條件渲染，例如this.state.isAnimating === false && <CardContent /> 。

CSS動畫

如果您使用CSS動畫，則可以使用transitionend事件來等待動畫結束。 因此，您必須在可以將事件附加到的動畫DOM元素上創建一個ref 。

這對您有幫助嗎？ 如果您還有其他問題，請告訴我。

Answer 2

這是使用React Spring庫的解決方案

• 我添加了一個狀態變量以顯示或不顯示卡的內容

   const [contentVisible, setContentVisible] = React.useState(false); 

• 我創建了一個彈簧來處理寬度過渡，當寬度接近300時，我將contentVisible設置為true

   const { width } = useSpring({ width: open ? 300 : 120, onFrame: ({ width }) => setContentVisible(width > 299.8) }); 

• 最后，我創建了一個動畫卡片組件

   const AnimatedCard = animated(Card); ... <AnimatedCard classes={{ root: classes.card }} style={{ width }}>