限制每个会话的CSS动画
限制每个会话的CSS动画
提问于 2018-08-17 18:01:58
我的网站目前有一个SVG标志的标题，其中动画使用CSS加载。我真的想将此动画限制为每个会话一次。
我知道如何将动画限制为只循环一次，但是每当用户导航到新页面时，它都会在页面加载时再次生成动画。我们的目标是让动画播放一次，然后不管用户导航到哪个页面，都不会再播放动画。
我对如何实现这一点的建议持开放态度。
该网站是建立在NOP商务系统，使用自定义的Web打印插件。
任何帮助都将不胜感激。
谢谢
回答 1
Stack Overflow用户
发布于 2018-08-17 19:22:04
这将需要一些逻辑，要么是服务器端，要么是一些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="">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51892950
复制相关文章
相似问题