如果多次看到 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。