CSS 过渡无法在模糊屏幕上开始

Question

我使用的是react js。我试着运行简单的代码：

setTimeout(() => {
setTimeout(() => {
const element = document.getElementById(‘circle’)
element.style.backgroundColor = ‘red’
}, 3000)
}, 3000)

"circle"的CSS只是：

width: 100px;
height: 100px;
border-radius: 50%;
background-color: blue;
transition: background-color 2s;

我运行代码和立即更改选项卡或最小化屏幕，等待6秒以上，然后返回页面，然后开始转换。由于某些原因，如果屏幕未聚焦，则转换不会运行。有人帮忙吗？？？

Answer 1

您描述的行为取决于浏览器，因为非活动选项卡的执行优先级较低。

在执行"JS动画"时，您可能需要使用requestAnimation。

更好的方法可以使用transition-delay的"CSS动画"。

Answer 2

使用此代码为什么要在代码中使用撇号标记。

<script>
setTimeout(() => {
setTimeout(() => {
const element = document.getElementById('circle')
element.style.backgroundColor = 'red'
}, 3000)
}, 3000)
</script>

Answer 3

实际上这对我没有真正的帮助。我做的解决方案是听"焦点"one_answers"模糊"，停止任何动画过程和模糊计时器，从最后一个焦点开始继续。