我的网站目前有一个SVG标志的标题,其中动画使用CSS加载。我真的想将此动画限制为每个会话一次。
我知道如何将动画限制为只循环一次,但是每当用户导航到新页面时,它都会在页面加载时再次生成动画。我们的目标是让动画播放一次,然后不管用户导航到哪个页面,都不会再播放动画。
我对如何实现这一点的建议持开放态度。
该网站是建立在NOP商务系统,使用自定义的Web打印插件。
任何帮助都将不胜感激。
谢谢
发布于 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="">
https://stackoverflow.com/questions/51892950
复制相似问题