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

Question

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

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

谢谢！！

Answer 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。如果 not 包含该名称-值对，则脚本将 class="animate" 应用于具有属性 id="elementToBeAnimated".[=17= 的元素]

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

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

How can I use CSS, Javascript, or a Cookie to disable animation reply on back button?

javascript

css

cookies

css-animations