时间戳

首页 > 解决方案 > 限制每个会话的 CSS 动画

html - 限制每个会话的 CSS 动画

问题描述

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

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

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

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

任何帮助将不胜感激。

谢谢

标签： htmlcssanimationsvgnopcommerce

解决方案

这将需要一些逻辑，无论是服务器端还是一些 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;
}
<img id="logo" src="https://placekitten.com/g/100/100" alt="">

推荐阅读