Javascript JS类删除未正常工作，开发工具问题

我的目的是在每次浏览器选项卡处于活动状态时设置DIV框的动画（意味着我将选项卡切换到其他选项卡并返回到此选项卡），因为我正在添加

addEventListener

&它可以工作，但只能工作一次，而不是每次
但是，当我在chrome中打开开发工具时，它每次都能正常工作
查看此视频以更好地了解我的问题：
JS类删除未正常工作，开发工具问题

document.addEventListener（“visibilitychange”，（）=>{
如果（document.visibilityState==“可见”）{
var元素=document.getElementById（“topHeading”）；
元素。类列表。添加（“r1”）；
}
否则{
var元素=document.getElementById（“topHeading”）；
元素.classList.remove（“r1”）；
}
});
.r1{
背景颜色：浅灰色；
宽度：300px；
高度：50px；
边框：6px纯绿；
填充：10px；
文本对齐：居中；
能见度：可见；
}
.r2{
背景色：红色；
}
.r1{
动画：反弹光1400ms
}
@关键帧在右侧反弹{
从…起
60%,
75%,
90%,
到{
动画计时功能：立方贝塞尔（0.215,0.61,0.355,1）；
}
从{
不透明度：0；
变换：translate3d（3000px，0，0）；
}
60% {
不透明度：1；
转换：translate3d（-25px，0，0）；
}
75% {
变换：translate3d（10px，0，0）；
}
90% {
变换：translate3d（-5px，0，0）；
}
到{
变换：translate3d（0,0,0）；
}
}

此文本是框中的内容。。
这是一个速度问题。添加类时，浏览器会立即假定不需要转换，因为元素已具有该类。您可以通过延迟
类列表来解决此问题。添加一点：

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

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

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

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

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

重新申请课程不起作用。您可以通过从dom中删除元素，然后再次添加或引入延迟来使其工作。有关重新启动css动画的更多信息，请访问

或者，您可以将动画类添加到html元素并编写更少的JS：

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

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

重新申请课程不起作用。您可以通过从dom中删除元素，然后再次添加或引入延迟来使其工作。有关重新启动css动画的更多信息，请访问

或者，您可以将动画类添加到html元素并编写更少的JS：

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

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

这是代码笔链接：这是否回答了你的问题？不，我也尝试过这个，但问题没有解决：只需在这个问题窗口选项卡中打开您的检查元素，然后切换到选项卡并返回到该选项卡，您将了解问题这里是代码笔链接：这是否回答了您的问题？不，我也尝试过这个，但问题没有解决：只需在这个问题窗口选项卡中打开您的Inspect元素，然后切换到选项卡并返回到此选项卡，您将了解问题：如何使用div标记名而不是：getElementById（“topHeading”）；我使用的是
var elements=document.getElementsByTagName（div）
但它不起作用，请帮助我使用标记名，如h1、div、h2等。我如何使用它应该是
'div'
而不是
div
，并且由于
getElementsByTagName
返回多个元素，您需要添加
[0]
以仅获取第一个（）或循环它们（）如何使用div标记名而不是：getElementById（“topHeading”）；我使用的是
var elements=document.getElementsByTagName（div）
但它不起作用，请帮助我使用标记名，如h1、div、h2等。我如何使用它应该是
'div'
而不是
div
，并且由于
getElementsByTagName
返回多个元素，您需要添加
[0]
以仅获取第一个（）或循环它们（）如何使用div标记名而不是：getElementById（“topHeading”）；我使用的是
var elements=document.getElementsByTagName（div）但它不起作用。请帮助我使用标记名，如h1、div、h2等。我如何使用您需要将字符串参数传递给document.getElementsByTagName（“div”）。另外，请注意，这将返回一个元素数组，而不是getElementById返回的单个元素；我使用的是
var elements=document.getElementsByTagName（div）但它不起作用。请帮助我使用标记名，如h1、div、h2等。我如何使用您需要将字符串参数传递给document.getElementsByTagName（“div”）。另外，请注意，这将返回一个元素数组，而不是getElementById返回的单个元素。