анимация css выполняется даже при переключении вкладок

#javascript #loops

Вопрос:

Я создал цикл для простой анимации на своем веб-сайте, и он запускается при переключении вкладок. остальная часть моего сайта этого не делает, так что одно отличие все портит. Могу ли я каким-либо образом заставить ее запускаться только тогда, когда я нахожусь на своей вкладке веб-сайта?

Код для анимации:

 var i = 1;

function loop1() {
        setTimeout(function () {
            document.getElementById("dollarAnim").animate([
                { opacity: "0" },
                { opacity: "1" },
                { opacity: "0" },
            ], {
                duration: 10000,
                iterations: 1,
            });
            if (i > 0) {
                loop1();
            }

        }, 20000)
    }

    loop1(); 
 <div id="dollarAnim" style="opacity: 0;">

lt;/div>

Комментарии:

1. Вы можете использовать API видимости страницы для определения фокуса / размытия вкладки.

Ответ №1:

вы можете добавить прослушиватель событий в window, когда пользователь уходит:

 window.addEventListener("blur", function stopAnimation(){});
 

и когда фокус снова начнет анимацию:

 window.addEventListener("focus", function sartAnimation(){});