0

使用本机浏览器上一个/下一个按钮时，我遇到了一种奇怪的行为。当导航到一个页面并返回到上一个页面时，过渡不会消失。它只是挂在屏幕上，直到我刷新页面。

有趣和令人沮丧的部分是它有时可以工作，有时不能在同一设备上。大多数情况下，它在 Chrome（桌面）和移动设备（iOS、Android）方面存在问题。如果它可以在台式机上运行，​​那么它可能无法在移动设备上运行，反之亦然。我还在我朋友的设备上对其进行了很多测试，正如预期的那样，其中一些有效，而另一些则无效。

我怀疑“点击链接”部分可能存在问题。但我不知道那里出了什么问题。：（ 我希望有一个人可以帮助我。

// Wait until the whole page is loaded.
$(window).on("load", function () {
  hideLoad(); // call out animations.
});


// Transitions In
// =================
function revealLoad() {
  $("#page-transition").removeClass("tt-transition-out");
  $("#page-transition").addClass("tt-transition-in");
}

// Transitions Out
// ================
function hideLoad() {
  $("#page-transition").addClass("tt-transition-out");
}

// On link click - I suspect a problem may be in this section
// ==============
$("a").on('click', function(e) {
  e.preventDefault();

  setTimeout(function (url) {
    window.location = url
  }, 1500, this.href);

  revealLoad(); // call in animations.
});

代码笔： https ://codepen.io/mrWilson123/pen/VwrXebj

你可以在这里现场测试。

4

2 回答 2

0

看起来下面的代码起到了作用。:)

window.onpageshow = function (event) {
    if (event.persisted) {
        window.location.reload();
    }
};

来源：https ://stackoverflow.com/a/13123626/2785140

谢谢，@mostafa。:)

于 2022-03-01T12:18:51.080 回答
0

这可能会对您有所帮助，$(document).ready(function(){})而不是因为您在加载所有内容后$(window).on("load", function () {}) 都有一些图像和触发器。$(window).on("load", function () {})

更多解释： https ://stackoverflow.com/a/3698214/11143288

于 2022-02-20T07:43:11.363 回答