如何在第一次加载时隐藏内容，但在 ajax 运行后保持显示

Question

现在，我有在.js库(typed.js(传递回调函数后显示的内容。这是我的脚本：

.JS

$(function(){
    $("#logo-black").typed({
        strings: ["Nothing^450&Co^250.^500", "^800__^400&Co^600."],
        typeSpeed: 70,
  backSpeed: 100,
  callback: function() {
    $(".typed-cursor").css("display", "none"),
    setTimeout(function(){
      $('.main-load').toggleClass('main-load-active'),
      $('.nav-text').toggleClass('nav-text-active');
    },400),
    $('.nav-reveal').toggleClass('nav-reveal-active');
  }
    });
});

.CSS

.main-load{
opacity: 0;
}
.main-load-active{
opacity: 1;
}
.main-load-transition{
-webkit-transition: all 1s cubic-bezier(0.17, 0.04, 0.03, 0.94);
-moz-transition: all 1s cubic-bezier(0.17, 0.04, 0.03, 0.94);
-o-transition: all 1s cubic-bezier(0.17, 0.04, 0.03, 0.94);
-ms-transition: all 1s cubic-bezier(0.17, 0.04, 0.03, 0.94);
transition: all 1s cubic-bezier(0.17, 0.04, 0.03, 0.94);
}

在setTimeout之后，我切换了类".main-load-active"，它将".main-load"的不透明度从0更改为1。

我的问题：如果用户导航到另一个页面，".main-load"会通过 ajax 被新内容替换。一旦用户返回到网站的索引，".main-load"就不可见，因为它在 CSS 中默认设置为 0 不透明度。

如何保持".main-load"不透明度：在站点加载/刷新时为 0，但在用户导航到另一个页面并返回后可见？

Answer 1

您可以

尝试使用document.referrer，这样您就可以检查用户是否来自另一个页面并将不透明度更改为 1

$(document).ready(function() {
   var referrer =  document.referrer;
});

Answer 2

您可以使用 sessionStorage 在回调触发时设置密钥。

sessionStorage.setItem('key',true);

在页面加载时，如果键位于 sessionStorage 中，请将 CSS 类添加到元素中：

$(document).ready(function () {
  if (sessionStorage.getItem('key')) {
    $('.main-load').addClass('main-load-active');
  }
});

Answer 3

事实证明，我想得太多了。

我在被替换的元素上有我的".main-load"css 类，所以我将它们应用于包含 ajax'd 内容的容器......现在一切都按预期工作。谢谢Nagle和@Ram Segev@Dan，我会在未来的项目中记住"sessionStorage"和"document.referrer"。