JS Class remove 无法正常工作，Dev Tools 问题

Question

我的目的是在每次浏览器选项卡处于活动状态时为 DIV 框设置动画（意味着我将选项卡切换到其他选项卡并返回到此选项卡），因为我正在添加 addEventListener 和它的工作但只有一次，而不是每次.
但是当我在 chrome 中打开开发者工具时，它每次都可以工作。
查看此视频以更好地了解我的问题：https://youtu.be/9Uvm__ln6zE
JS Class remove 无法正常工作，Dev Tools 问题

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>

提前致谢

Answer 1

这是一个速度问题。添加类时，浏览器会立即假定不需要转换，因为元素已经具有类。您可以通过稍微延迟classList.add 来解决此问题：

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

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

Fixed Codepen

Answer 2

重新申请课程不起作用。您可以通过从 dom 中删除元素然后再次添加它或引入延迟来使其工作。你可以在https://css-tricks.com/restart-css-animation/阅读更多关于重启css动画的信息

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

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

或者可以在html元素中加入动画类，少写JS：

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

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