CSS animation 不适用于 JavaScript？

Question

我有一个图像，当用户切换选项卡时每 7 天才会弹出一次，然后返回页面。 我希望该图像具有 animation 从页面底部出现在视口中心上方。

我有具有 animation 的代码，但它不工作。 我不确定在我的可见性更改 function 中是否需要发生某些事情，因为目前 window.load function 什么也没做。

当我在控制台中检查图像并取消勾选并勾选top: "10vh"时，我可以看到 animation 发生，但我需要在用户切换选项卡然后返回页面时发生这种情况。

JS：

window.addEventListener("load", function () {
  const popUp = document.getElementById("circle-parent");
  popUp.style.top = "10vh";
});


document.addEventListener("visibilitychange", () => {
  // if (!cookieExists()) {
  if (document.visibilityState === "hidden") {
    popUp.style.display = "none";
  } else if (document.visibilityState === "visible") {
    popUp.style.display = "block";
    // setCookie(cookieName);
  }
  //   }
  //  else {
  //   setCookie(uklFocusCookie)
  // }
});

HTML：

<div class="image-wrapper">
            <div id="circle-parent" class="circle-parent" style="display: none">
                <img id="circle" class="circle" src="assets/images/thanks_for_visiting_img.png">
                <img id="close-button" class="close-button" src="assets/images/close_green.png" onclick="handleButtonClick()">
                <img id="quotes-button" class="quotes-button" src="assets/images/btn.png" onclick="handleButtonClick()">
                <div class="background">
                </div>
            </div>
        </div>

CSS：

.circle-parent {
    position: fixed;
    left: calc(45% - 225px);
    width: 550px;
    height: 550px;
    z-index: 1;
    right: 0px;
    outline: none;
    top: 140vh;
    transition: all 1s ease;
}

Answer 1

这将在 chrome 和 firefox 中正常工作。

我使用了 window object 的模糊和聚焦事件来为图像 class 提供过渡效果。 当文档或整个选项卡失去焦点并重新聚焦时发生焦点事件时，模糊事件会触发。

可见性更改事件不起作用的原因是，当此事件触发时，用户并没有失去页面的焦点。因此此处不会检测到选项卡更改

JS

    var popUp = document.getElementById("circle-parent");
    window.addEventListener("load", function () {
popUp.style.display = "block";  
    popUp.style.top = "10vh";
  
});


window.addEventListener('blur',function(){
popUp.style.display = "none";
 
});
window.addEventListener('focus',function(){
popUp.style.display = "block";
});

CSS

    .circle-parent {
      position: fixed;
      left: calc(45% - 225px);
      width: 550px;
      height: 550px;
      z-index: 1;
      right: 0px;
      outline: none;
      top: 140vh;
      transition: 0.4s;
      animation: show_pic 1s forwards 1;
    }

    @keyframes show_pic {
      from {
        transform: translateY(140vh);
      }
      to {
        transform: translateY(10vh);
      }
    }

HTML

    <div class="image-wrapper">
            <div id="circle-parent" class="circle-parent" style="display: none">
                <img id="circle" class="circle" src="assets/images/thanks_for_visiting_img.png">
                <img id="close-button" class="close-button" src="assets/images/close_green.png" onclick="handleButtonClick()">
                <img id="quotes-button" class="quotes-button" src="assets/images/btn.png" onclick="handleButtonClick()">
                <div class="background">
                </div>
            </div>
        </div>