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

I tried to find an article on this but I couldn't find one so here I am posting hoping someone can point me in the right direction. I have a CSS keyframe animation that plays on the homepage of my website. Is there a way I can have it play when someone comes to the homepage but keep it from replaying over and over again when someone uses the browser's back button to go back to the homepage?

我试图找到一篇关于此的文章,但我找不到一篇,所以我发帖希望有人可以指出我正确的方向。我有一个CSS关键帧动画,可以在我网站的主页上播放。当有人使用浏览器的后退按钮返回主页时,是否有一种方法可以让玩家进入主页但是不能一次又一次地重播?

I'd love it if this was a quick CSS or JavaScript fix but if that's not possible is there a way to use a cookie to disable the animation class?

我喜欢它,如果这是一个快速的CSS或JavaScript修复,但如果不可能有一种方法使用cookie来禁用动画类?

Thanks!!

1 个解决方案

#1

At the bottom of your homepage (just before </body>) add:

在主页的底部(就在 之前)添加:

<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>

The first function checks document.cookie to see if it contains the name-value pair preventAnimation=true. If it does not contain that name-value pair, the script applies class="animate" to the element which has the property id="elementToBeAnimated".

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

The second function establishes a session cookie just before the user exits the homepage, and writes to the cookie the name-value pair preventAnimation=true so that any visitor who returns to the homepage (after now leaving it) will no longer see the animation (see the first function).

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