CSS 动画，onAnimationEnd 只运行一次答案

【问题标题】：CSS Animation, onAnimationEnd Running only onceCSS 动画，onAnimationEnd 只运行一次
【发布时间】：2021-04-01 13:04:50
【问题描述】：

Hy stack，我正在尝试在单击按钮时制作动画。使用 React 和 CSS。问题是 onAnimationEnd 只运行一次。

我尝试对 CSS 进行一些更改，但我不确定问题出在 CSS 中，但我没有找到任何好的文档。

@keyframes example {
  from {
    opacity: 100%;
  }
  to {
    opacity: 10%;
    left: 15%;
  }
}

.products {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 15%;
  z-index: 3;
}

.slide-animation {
  animation: example 0.5s;
}

function App() {
  const [transition, setTransition] = useState(false)
  console.log(transition)

  return (
<div className='generalContainer'>
      <img
        src='images/products/Zero.png'
        alt='cocacola'
        onAnimationEnd={() => setTransition({ transition: false })}
        className={transition ? "products slide-animation " : "products"}
      />
      <div className='square center-page '>
        <h2
          className='next-button'
          onClick={() => setTransition({ transition: true })}
        >
          Next
        </h2>
      </div>
    </div>
    )
   }

【问题讨论】：

您的动画一旦触发就无法再次触发，因为它已经应用并结束。要重置它，您可以切换一个类，以便将其删除或替换为另一个类。如果您想通过 50% 的步骤，那么您需要每次增加/减少 50% 的转换值。您的 sn-p 不起作用，您需要做出反应并使用 javascript textarea。
50% 你有帖子或例子是什么意思？
??这是你的问题，你想在这里做什么？
我的问题是。您是否有示例或帖子可以解释我如何“切换一个类，以便将其删除或替换为另一个类。”
classList.toggle('myclass'); 是您从我之前的评论中提出的问题，我相信 ;) 请参阅：developer.mozilla.org/en-US/docs/Web/API/Element/classList 翻译成反应：stackoverflow.com/questions/36403101/toggle-class-in-react

标签： javascript css reactjs animation jsx

【解决方案1】：

animation-iteration-count 应设置为 infinite 以实现 CSS 中的不间断动画。尝试添加此 CSS。

.slide-animation {
  animation: example 0.5s infinite;
}

【讨论】：

这不是一个好的解决方案，因为动画是永无止境的。我的目标是，每次我再次按下它的支持时，它都不在循环中。
好的，我可能理解错了这个问题。我的错。那你想要什么。您是否希望动画仅在单击 h2 时发生。
您的问题说明了其他问题 :) 您能否逐步告诉我场景。我很乐意提供帮助:)
一步一键点击 -> 动画发生 -> 动画结束 -> 可以选择再次按下按钮以使动画再次发生。
我明白了你的问题。没问题。给我一点时间。我会在本地执行代码：）别担心，我们会想出一个有希望的解决方案