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.如果淡入淡出的目的是先做一个然后再做另一个，那么告诉代码在动画{{1}之前不要启动fade-out动画} 完成。

2.如果淡入淡出的目的是不断地来回变化，那么在代码中添加一个循环。

像这样：

fade-in

将此添加到您的样式中。