Question

您第一次访问我的网站时，我有一个说

的动画

＆＃34;你好。我是鲍勃＆＃34;，那个动画慢慢消失。然后通过导航栏，用户可以进入网站的另一个页面。

问题在于，如果他们返回到主页（主页面），则动画再次显示。这次我只想要＆＃34;你好。我是Bob＆＃34;。没有动画。

$(".fade-in-first").addClass("animated fadeInUp");
setTimeout(function(){
     $(".fade-in-second").animate({ opacity: 1 });
    $(".btn-explore").addClass("pulse-anim");
}, 1300);

我上面的jQuery是动画。我想要像...... if (count) == 0, then animate, count ++

这样的东西

我尝试设置一个变量并执行它，但它没有用。

Answer 1

您可以使用localStorage存储用户看过动画的事实。

我不确定您使用的setTimeout ......但我离开了它。

$(".fade-in-first").addClass("animated fadeInUp");
setTimeout(function(){
  if(typeof(localStorage.getItem("welcomeShown")) != null && localStorage.getItem("welcomeShown") != "true"){
    $(".fade-in-second").animate({ opacity: 1 },5000);
    localStorage.setItem("welcomeShown","true");
  }else{
    $(".fade-in-second").css("opacity",1);
  }

  $(".btn-explore").addClass("pulse-anim");
}, 1300);

您可以在CodePen中尝试，其中还有一个按钮来清除localStorage（重试多次！）

Answer 2

假设他们的浏览器在返回您的主页时重新加载您的网站（即您没有创建单页应用），那么您的脚本也将重新初始化。因此，count不会保留其拥有的价值，而这需要跟踪用户之前的访问权。

在这种情况下，您需要存储Cookie，或使用sessionStorage或localStorage。

// sessionStorage or localStorage (localStorage usage is exactly the same)
if (!sessionStorage.getItem('hasVisited')) {
  $(".fade-in-first").addClass("animated fadeInUp");
  setTimeout(function(){
    $(".fade-in-second").animate({ opacity: 1 });
    $(".btn-explore").addClass("pulse-anim");
  }, 1300);

  sessionStorage.setItem('hasVisited', true); 
}

如果您只想跟踪当前会话的主页访问，请使用sessionStorage，只要当前标签，窗口或浏览器未关闭，该会话就会持续。在实践中，似乎sessionStorage可以持续关闭/重新打开选项卡，可能以特定于供应商的方式，因为它们处理选项卡历史记录。此外，sessionStorage中的项目不会在标签之间共享，因此，如果您的用户在多个标签页中打开该页面，并从不同的标签返回主页，那么他们会再次看到您的动画。< / p>

如果您希望值在不同会话和标签之间保持不变，请使用localStorage。用于浏览站点的所有选项卡都可以访问同一个同步的localStorage对象。

注1：我们建议您使用Web Storage API阅读和设置session/localStorage（setItem() / getItem()）的值，而不是阅读和写作直接对象，避免处理从原型继承的读取值的问题，并避免覆盖现有属性。

例如，如果您执行以下操作：

localStorage.key = 'My key value';
console.log(localStorage.key);

您会注意到您设置的值确实可用且可读，但遗憾的是您现在已经覆盖了localStorage对象的key方法！

注2：这些值只能通过相同的协议在同一个子域上访问！因此，如果您从www.example.com转到login.example.com，或从http://www.example.com转到https://www.example.com，则不会保留这些值。

缓存

如前所述，你也可以使用cookies，但解析这些值需要做更多的工作（尽管你已经使用过jQuery，所以它不会太糟糕）。您还必须注意您为Cookie设置的path，否则它只适用于您设置它的路径。还需要考虑expires的价值。有关详细信息，请参阅以下链接：

https://www.w3schools.com/js/js_cookies.asp

https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

Answer 3

稍微更模块化的解决方案，因为您可能想要检查他们是否曾在多个案例中访问过。

if (!localStorage.isFirstVisit) {
    localStorage.isFirstVisit = true;
} else if (localStorage.isFirstVisit == 'true') {
    localStorage.isFirstVisit = false;
}

if((localStorage.isFirstVisit == 'true') {
    $(".fade-in-first").addClass("animated fadeInUp");
    setTimeout(function(){
        $(".fade-in-second").animate({ opacity: 1 });
        $(".btn-explore").addClass("pulse-anim");
    }, 1300);
}

Answer 4

您可以使用LocalStorage设置一个属性，以加载特定页面上的动画，因此您无需重播它。我不喜欢这种方法，因为在用户没有清除其本地存储之前，他再也看不到动画了…… 我认为一种更好的方法是设置一个有效期较短的cookie（例如1天）。

例如，使用localStorage：

// 1 - using LocalStorage: play anim only one time until the localstorage is cleared:
if (!window.localStorage.getItem('homeAnimPlayed')) {
    setTimeout(() => {
        window.localStorage.setItem('homeAnimPlayed', "true");
        this.setState({ animationLoaded: true })
    }, 3000);
} else {
    this.setState({ animationLoaded: true })
}

使用Cookie：

// 2 - using a cookie: you can set a custom expiration, for example 1 day. 


// use this 2 function to read/write cookies with a custom expire date
function writeCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    }
    else var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

// then you can set the cookie: play anim only one time: expires in 1 days
let cookie = readCookie("animPlayed_home");
if (!cookie) {
    setTimeout(() => {
        writeCookie("animPlayed_home", "true", 1);
        this.setState({ animationLoaded: true })
    }, 3000);
} else {
    this.setState({ animationLoaded: true })
}

如何只显示动画第一次html css

4 个答案:

缓存