javascript - 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

您描述的行为取决于浏览器 because inactive tabs have low priority execution .

当您执行“JS 动画”时，您可能需要使用 requestAnimation .

更好的方法可能是使用带有 transition-delay 的“CSS 动画” .