javascript - React Transition CSS动画闪烁

Question

我需要帮助以防止我的 HTML 闪烁。我有一个使用 React Transition 的淡入淡出动画组件。有时我会在 Chrome 上看到闪烁效果。在 Safari 中一切正常。我尝试添加 -webkit-backface-visibility: hidden;以及在 Google 中找到的更多解决方案，但一切都让我失败了。你有什么想法？

Codepen

Video with the flickering effect.

Answer 1

如果你要不断地淡入淡出，我会把它放在一个循环中。我通过不断单击按钮进入 Flickr，那是因为当您单击它时它会同时开始淡入、淡出和淡入。我让它停止闪烁，直到它完成动画。它适用于 safari 的原因是它不会让两个相同的动画同时运行，我的意思是如果 fade-in和 fade-in要同时运行，它不会让最后一个运行，但如果你运行 fade-in和 fade-in-2同时你会在 safari 中产生闪烁效果。
如果你想解决这个问题:
1. 如果淡入淡出的目的是先做一个然后再做另一个然后告诉代码不要启动 fade-out动画直到动画fade-in完成。
2. 如果淡入淡出的目的是不断地来回变化，那么在代码中添加一个循环。
像这样:

animation-iteration-count: infinite;

将此添加到您的样式中。