CSS переход не начнется на экране размытия

Question

Я использую реагировать JS. Я пытаюсь запустить простой код:

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

CSS "круга" просто:

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

Я запускаю код и вкладку немедленных изменений или свернуть экран, ожидая большезатем 6 секунд и вернитесь на страницу, а затем начните переход. По какой-то причине переход не запускается, если экран не в фокусе. Любая помощь, ребята ???

Answer 1

Поведение, которое вы описываете в зависимости от браузера , потому что неактивные вкладки имеют низкоприоритетное выполнение .

Во время выполнения "JS Animation" вы можете захотеть использовать requestAnimation.

В лучшем подходе можно использовать «CSS-анимацию» с transition-delay.

Answer 2

На самом деле это не очень помогает мне. Решение, которое я сделал, состоит в том, чтобы прослушивать «фокус» и «размытие» и останавливать любой процесс анимации и таймеры на размытие и продолжать с последней точки в фокусе.

Answer 3

Используйте этот код, почему в коде используется апострофная метка.

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