小编Mar*_*ina的帖子

我有一个包含 3 个步骤的模态组件。在第一步中，我有一个没有循环的 gif（换句话说，gif 不是无限的 gif）。当我打开模态并返回第一步时，我希望 gif 重新启动动画并仅循环一次。

我的问题是：当我第一次显示 gif 时，浏览器会下载 gif 并且 gif 工作正常，但之后浏览器从缓存中获取 gif 并且不会再次启动。所以当我关闭模态并再次打开或者我再次回到第一步时，就像我有一个图像而不是一个 gif。

限制：我不能多次下载 gif，所以我不能 ?a=${Math.random()强制 gif 再次循环。

我试过的：

1）img当我不在第一步并且没有打开模态时，我试图将 src 放在标签中。当我在第一步并打开模态时，我将 gif 放在img标签的 src 中

2）我尝试做与 1 次尝试相同的事情，但使用另一个 gif

3）我尝试在模态组件中执行与尝试 1 和 2 相同的操作，并将 src 传递给步骤子组件

4）img当我不在第一步并且没有打开模态时，我试图从DOM中删除标签

我的简化组件：

export class Modal extends React.PureComponent {
  state = { step: FIRST_STEP }

  render() {
    {currentStep === FIRST_STEP && this.renderFirstStep()}
    {currentStep === SECOND_STEP && this.renderSecondStep()}
  }

  renderFirstStep() { …