我需要帮助防止HTML闪烁。我有一个使用React过渡组件的淡入淡出动画组件。有时在Chrome上会看到闪烁效果，而在Safari中一切正常。我尝试添加
-webkit-backface-visibility: hidden;和一些在Google中找到的其他解决方案，但一切都失败了。你有什么想法吗？
React过渡CSS动画闪烁问题
7
- teimurjan
4
你可能没有得到太多回复，因为你的问题不符合我们的标准。请参阅https://stackoverflow.com/help/how-to-ask，然后修改你的问题帖子，在这里展示相关的代码。 - isherwood
4在我的 Chrome 浏览器中没有闪烁。尝试更新 Chrome 版本。 - raman
谁有正确的答案？ - Allancoding
它在闪烁，是因为重新渲染DOM元素。通过类别更改（重新附加），动画会再次开始。就个人而言，我认为您的状态逻辑对于像淡入淡出效果这样的常见转换来说有点太复杂了。 - Jax-p
1个回答
4
如果您希望不断地淡入淡出，我建议将其放到循环中。我通过不断点击按钮进入Flickr，因为当您快速点击按钮时，它会同时开始淡入、淡出和再次淡入。我等待动画完成后才停止它的闪烁。Safari支持这个原因是因为它不允许同时运行两个相同的动画，我的意思是如果
fade-in和fade-in同时运行，最后一个就不能运行，但如果您同时运行fade-in和fade-in-2，则会在Safari中产生闪烁效果。
如果您想解决这个问题：
1. 如果淡入淡出的目的是先进行一个动画再进行另一个，则告诉代码在动画fade-in完成之前不要启动fade-out动画。
2. 如果淡入淡出的目的是不断来回变化，则在代码中添加一个循环。
像这样：
animation-iteration-count: infinite;
将以下内容添加到你的样式表。
- Allancoding
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接