在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 }}>