html - 限制每个 session 的 CSS 动画

Question

我的网站目前在页眉中有一个 SVG Logo ，它在加载时使用 CSS 进行动画处理。 我真的很想将此动画限制为每个 session 一次。

我了解如何将动画限制为仅循环一次，但是每当用户导航到新页面时，它都会在页面加载时再次播放一次动画。 目标是让动画播放一次，然后无论用户导航到哪个页面都不再播放动画。

我愿意听取有关如何实现这一目标的建议。

该网站建立在 NOP Commerce 系统之上，使用自定义 Web 打印插件。

如有任何帮助，我们将不胜感激。

谢谢

Answer 1

这将需要一些逻辑，服务器端或一些 Javascript。

下面是一个基于 javascript 的有效解决方案的示例。 Logo 的 ID 为 logo，如果动画还具有 animate 类，则动画仅以 Logo 为目标。

Javascript 检查是否有 sessionStorage变量已设置。如果不是，则将类添加到 Logo 中，并设置 sessionStorage 变量，这样它就不会再次运行。

注意:该示例不会在 Stackoverflow 上运行，但应该可以在现实生活中运行。

if (window.sessionStorage.getItem('logoAnimated') === null) {
  document.getElementById("logo").classList.add('animate');
  window.sessionStorage.setItem('logoAnimated', 1);
}

@keyframes logoAnimation {
  from {
    transform: rotate(0);
  }
  
  to {
    transform: rotate(360deg);
  }
}

#logo.animate {
  animation: logoAnimation 1s;
}

<img id="logo" src="https://placekitten.com/g/100/100" alt="">