1

my purpose is that to animate the DIV Box everytime when browser Tab is active (means i switch the tab to other & back to this tab), As i am adding addEventListener & its working but one time only, not everytime.
But when i open Developer tools in chrome it's work everytime.
Check this video to better understand my problem: https://youtu.be/9Uvm__ln6zE
JS Class remove not working properly, Dev Tools problem

document.addEventListener("visibilitychange", () => {

    if(document.visibilityState === "visible" ){

  var element = document.getElementById("topHeading");
  element.classList.add("r1");
}
else{
 var element = document.getElementById("topHeading");
  element.classList.remove("r1");

}
});
.r1 {
  background-color: lightgrey;
  width: 300px;
  height: 50px;
  border: 6px solid green;
  padding: 10px;
  text-align: center;
visibility: visible;
}

.r2 {
  background-color: red;
  
}
.r1 {
    animation: bounceInRight 1400ms both
}

@keyframes bounceInRight {

    from,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    from {
        opacity: 0;
        transform: translate3d(3000px, 0, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0);
    }

    75% {
        transform: translate3d(10px, 0, 0);
    }

    90% {
        transform: translate3d(-5px, 0, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}
<div id="topHeading">
This text is the content of the box..
</div>

Thanks in advance

Rakesh Suthar
  • 119
  • 7
  • Here is codepen Link: https://codepen.io/rksbhl/pen/QWymqGo – Rakesh Suthar Jul 07 '20 at 10:41
  • Does this answer your question? [visibilitychange event is not triggered when switching program/window with ALT+TAB or clicking in taskbar](https://stackoverflow.com/questions/28993157/visibilitychange-event-is-not-triggered-when-switching-program-window-with-altt) – Greedo Jul 07 '20 at 10:45
  • no i also tried this but the problem is not solving: Simply in this question window tab open your Inspect Element then switch to tab & back to this tab you will understant the problem – Rakesh Suthar Jul 07 '20 at 10:48

2 Answers2

3

This is a speed problem. When you add the class, the browser immediatly assumes no transition is needed, because the element already has the class. You can fix this by delaying your classList.add a little:

var element = document.getElementById("topHeading");

document.addEventListener("visibilitychange", () => {
  var isVisible = document.visibilityState === "visible";
  setTimeout(function() {
    element.classList[isVisible ? 'add' : 'remove']("r1");
  });
});

Fixed Codepen

blex
  • 24,941
  • 5
  • 39
  • 72
  • How can i use div Tag name instead of : getElementById("topHeading"); i am using `var elements = document.getElementsByTagName(div);` but it's not working plz help me to use tag name like h1, div, h2 etc how can i use – Rakesh Suthar Jul 07 '20 at 11:08
  • It should be `'div'` instead of `div`, and since `getElementsByTagName` returns multiple elements, you would either need to add `[0]` to get only the first one ([demo 1](https://codepen.io/blex41/pen/GRoxMWd)) or loop over them ([demo 2](https://codepen.io/blex41/pen/zYrWEyZ)) – blex Jul 07 '20 at 11:17
2

Re-applying the class doesn't work. You can get it to work by removing the element from the dom and then adding it again or by introducing a delay. You can read more about restarting css animations at https://css-tricks.com/restart-css-animation/

document.addEventListener("visibilitychange", () => {
  var element = document.getElementById("topHeading");

  if(document.visibilityState === "visible" ) {
    element.classList.add("r1");
  } else {
    element.parentNode.replaceChild(element.cloneNode(true), element);
  }
  
});

Or you can add the animation class to the html element and write less JS:

 document.addEventListener("visibilitychange", () => {
  var element = document.getElementById("topHeading");

  if(document.visibilityState === "visible" ) {
    element.parentNode.replaceChild(element.cloneNode(true), element);
  }
  
});
triihim
  • 62
  • 4
  • How can i use div Tag name instead of : getElementById("topHeading"); i am using `var elements = document.getElementsByTagName(div);` but it's not working plz help me to use tag name like h1, div, h2 etc how can i use – Rakesh Suthar Jul 07 '20 at 11:08
  • You need to pass a string argument to the document.getElementsByTagName("div"). Also, notice that this will return an array of elements instead of single element returned by getElementById. – triihim Jul 07 '20 at 11:19