如何使用 CSS、Javascript 或 Cookie 来禁用返回按钮上的动画回复？答案

【问题标题】：How can I use CSS, Javascript, or a Cookie to disable animation reply on back button?如何使用 CSS、Javascript 或 Cookie 来禁用返回按钮上的动画回复？
【发布时间】：2015-07-12 11:21:38
【问题描述】：

我试图找到一篇关于此的文章，但我找不到，所以我在这里发帖希望有人能指出我正确的方向。我有一个在我的网站主页上播放的 CSS 关键帧动画。有没有一种方法可以让我在有人访问主页时播放它，但当有人使用浏览器的后退按钮返回主页时，它不会一遍又一遍地重播？

如果这是一个快速的 CSS 或 JavaScript 修复，我会很高兴，但如果这不可能，有没有办法使用 cookie 来禁用动画类？

谢谢！！

【问题讨论】：

这行得通吗？ stackoverflow.com/questions/18166999/…
JS: document.body.dataset.hit=localStorage.hit||0; localStorage.hit=1; CSS: body[data-hit='0'] .animationClass {} ;使用 body 属性作为现有 CSS 动画指向规则的命名空间，并在第一次加载后应用 body 属性...
我认为第一个不会起作用，因为刷新页面后会重置迭代计数。 IE。当按下返回按钮时。不过，我正在研究@dandavis 提出的第二种解决方案。
@dandavis 我做的不对...你有机会帮我语法吗？对此，我真的非常感激。 document.body.dataset.hit=localStorage.hit||0; localStorage.hit=1； CSS: #logo-hp { -webkit-animation: animate 3s ease; -moz-animation：动画 3s 轻松； -ms-animation：动画 3s 缓动； -o-animation：动画 3s 轻松； [at sign]namespace body[data-hit='0'] } 我认为我没有正确放置命名空间？你能帮我把它放在哪里吗？
#logo-hp 应该是 body[data-hit='0'] #logo-hp 如果那里有其他非动画样式，请将它们放在像以前一样的“普通”#logo-hp 规则中，这样它们就不会被切换。

标签： javascript css cookies css-animations

【解决方案1】：

在您的主页底部（就在</body> 之前）添加：

<script>
function startAnimation() {
var cookie = document.cookie;

if (cookie.indexOf('preventAnimation=true') === -1) {
    document.getElementById('elementToBeAnimated').setAttribute('class','animate');
    }

}

function setPreventAnimationCookie() {
document.cookie = 'preventAnimation=true; path=/';
}

window.onload = startAnimation();
window.onbeforeunload = setPreventAnimationCookie();
</script>

第一个函数检查document.cookie 以查看它是否包含名称-值对preventAnimation=true。如果它不包含该名称-值对，则脚本将class="animate"应用于具有id="elementToBeAnimated"属性的元素。

第二个函数在用户退出主页之前建立一个会话cookie，并将名称-值对preventAnimation=true写入cookie，这样任何返回主页（现在离开后）的访问者将不再看到动画（见第一个函数）。

【讨论】：