如果多次看到 JS 动画，如何禁用它？

Question

我有一个 Laravel 5.8 项目。在主要方面，我有带有 svg 元素的动画。三个字母JJK，一一出现，有一定的超时时间。JS中有一个函数可以处理这个问题。当您第一次访问网站时，动画还可以，但我想在您看过一次后停止动画。例如，如果您从主页转到子页面然后返回，则动画会使侧面渲染速度减慢 4 秒。我想改变它。将动画的出现次数限制为一次。我认为有 svg 元素：并且JS文件中有代码：$(document).ready(function () {  var timeout = 2000;    setTimeout(function () {        $('.header-col #j-1').css('opacity', '1');        setTimeout(function () {            $('.header-col #j-2').css('opacity', '1');        }, 400);        setTimeout(function () {            $('.header-col #k').css('opacity', '1');        }, 800);    }, timeout);    var timeout = 3000;    $('#jaciubek').children().each(function () {        var self = this;        timeout += 100;        setTimeout(function () {            $(self).css('opacity', '1');        }, timeout);    });    timeout = 3500;    $('#janiga').children().each(function () {        var self = this;        timeout += 100;        setTimeout(function () {            $(self).css('opacity', '1');        }, timeout);    });    timeout = 4000;    $('#kupiec').children().each(function () {        var self = this;        timeout += 100;        setTimeout(function () {            $(self).css('opacity', '1');        }, timeout);    });});有人有一些建议我该怎么做吗？

Answer 1

有几种方法。例如，您可以使用 cookie。但更现代的方法是使用LocalStorage API。

在运行动画之前，请执行如下检查：

if (window.localStorage.getItem("SeenAnimation"))
   return; // Exit before starting the animation

在动画代码中，当动画完成（或用户已看到“足够”）时，请执行以下操作。

window.localStorage.setItem("SeenAnimation", true);

如果您只想在当前会话中记住此设置，而不是永远记住，请改用window.sessionStorage。