CODEWITHSUNDEEP
javascriptcssreactjscss-transitionstransition
Nir Hanan
Nir Hanan

Reputation: 1

CSS transition won't start on blur screen

I'm using react js. I try to run the simple code:

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

The CSS of 'circle' is just:

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

I run the code and immediate change tab or minimize the screen, waiting more then 6 seconds and go back to the page and then the transition start. For some reason the transition not run if screen not in focus. Any help guys???

Upvotes: 0

Views: 140

Answers (3)

Nir Hanan
Nir Hanan

Reputation: 1

Actually it is not really help me. The solution i made is to listen to 'focus' and 'blur' and stop any animations process and timers on blur and continue from last point at focus.

Upvotes: 0

M F L
M F L

Reputation: 1

Use this code why are using Apostrophe mark in code. 

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

Upvotes: 0

Dennis Vash
Dennis Vash

Reputation: 53974

The behavior you describe depending on the browser because inactive tabs have low priority execution.

While you performing a "JS Animation" you may want to use requestAnimation.

A better approach may use a "CSS Animation" with transition-delay.

Upvotes: 1

Related Questions