运行仅在您第一次访问网站时播放动画

Question

我有一个在主页上弹出的标志，你点击它之后，你可以在网站上走得更远（我已经得到了很好的效果）。但是当访问另一个页面并返回索引页面时，动画会重新开始。

有没有办法将其锁定在某些 WordPress-PHP-代码或其他代码之后？

Answer 1

解决此问题的最佳方法是在客户端（使用 JavaScript）。使用 localStorage 或 sessionStorage（取决于所需的结果*）在访问者浏览器上存储变量。当变量尚未设置时，使用此变量仅显示一次动画。

在此处查看代码示例：

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

(*)localStorage和sessionStorage的区别：使用 sessionStorage 时，数据仅保存到 window 或选项卡关闭，而使用 localStorage 时，数据将一直保存到访问者手动清除 his/hers 浏览器缓存或直到您的网站应用清除数据。

Answer 2

感谢您的回答。这正是我要找的。我有一个 if else code 在一起，但是动画必须播放两次才能激活代码的 else 部分。有什么想法吗？

  const toggleTag = document.querySelector('.popup-logo')

const mainTag = document.querySelector('.popup-logo')
const logoTag = document.querySelector('.logo')
const titleTag = document.querySelector('a.title-container')
const mainpageTag = document.querySelector('body')

const karmelTag = document.querySelector("div.karmel")





// Popup logo sessionStorage

const element = document.querySelector('.popup-logo');


if(typeof(sessionStorage.getItem("popupLogoShown")) != null && sessionStorage.getItem("popupLogoShown") != "true"){

  console.log("sessionStorage active");
  element.classList.add("animationplay");
  sessionStorage.setItem("popupLogoShown","true");

  toggleTag.addEventListener('click', function() {
    mainTag.classList.toggle('hidden')
    logoTag.classList.remove('hidden')
    titleTag.classList.remove('hidden')
    mainpageTag.style.position = "absolute"
    karmelTag.style.marginLeft = "4%"
    karmelTag.style.transition = "all 1s"
  })


}else{
  console.log("sessionStorage already active.");
  element.classList.add("animationplayed");
  sessionStorage.setItem("popupLogoShown","true");

  mainTag.classList.toggle('hidden')
  mainpageTag.classList.toggle('popup-logo-beenshown')
  logoTag.classList.remove('hidden')
  titleTag.classList.remove('hidden')
  karmelTag.style.marginLeft = "4%"
  mainpageTag.style.position = "absolute"

};

要查看实际效果，请访问以下站点：working example

运行仅在您第一次访问网站时播放动画

Running an animation only the first time you visit website

wordpress

wordpress-theming

运行 仅在您第一次访问网站时播放动画

Running an animation only the first time you visit website

wordpress

wordpress-theming

运行仅在您第一次访问网站时播放动画