限制每个会话的 CSS 动画

【问题标题】：Limit CSS animation per session限制每个会话的 CSS 动画
【发布时间】：2019-01-24 08:27:33
【问题描述】：

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

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

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

该网站基于 NOP Commerce 系统构建，使用自定义 Web 打印插件。

任何帮助将不胜感激。

谢谢

【问题讨论】：

不可能只使用 CSS。渲染 CSS 时将触发动画。您可能需要基于 PHP/Javascript 会话
也许使用Javascript来加载CSS和写cookie的同时？

标签： html css animation svg nopcommerce

【解决方案1】：

这将需要一些逻辑，无论是服务器端还是一些 Javascript。

下面是一个基于 javascript 的有效解决方案示例。徽标的 ID 为 logo，并且动画仅在徽标也具有类 animate 时才以徽标为目标。

Javascript 检查是否设置了 sessionStorage 变量。如果不是，则将该类添加到徽标中，并设置 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;
}

&lt;img id="logo" src="https://placekitten.com/g/100/100" alt=""&gt;

【讨论】：