CSS 過渡不會在模糊屏幕上開始

Question

我正在使用反應 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 秒，然后 go 返回頁面，然后開始轉換。 由於某種原因，如果屏幕不在焦點上，則過渡不會運行。 任何幫助的家伙？？？

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

實際上它並沒有真正幫助我。 我提出的解決方案是聽“焦點”和“模糊”並停止任何動畫過程和模糊計時器，並從焦點的最后一點繼續。