Question

我想知道是否可以对jsx元素的呈现进行去抖动。我有一个面板扩展的动画，其中包含一些内容。如果面板为空（仅背景），则动画是平滑的，并且按预期工作。动画和相关组件均来自Material-UI。当内容已经在面板中时，就会出现问题，因此动画（宽度扩展）只是跳到内容的宽度，使动画看起来不稳定。 Here is a similar example代表我的意思。该代码是我在面板中使用的代码，它们在扩展方面的作用相同。唯一不同的是，此示例中的内容只是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

这里是solution，使用react spring library

我添加了一个状态变量以显示或不显示卡上的内容

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

在React

2 个答案:

JS动画

CSS动画