Question

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

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

我愿意就如何实现这一目标提出建议。

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

任何帮助将不胜感激。

谢谢

Answer 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;
}

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

每个会话限制CSS动画

1 个答案: