CODEWITHSUNDEEP
jquerycsscss-transitionsback-buttonpage-transition
mrWilson
mrWilson

Reputation: 101

Page transition hangs when using the native browser prev/next button

I am experiencing a strange behavior when using the native browser prev/next button. When navigating to a page and coming back to the previous one, the transition doesn’t disappear. It just hangs on the screen until I refresh the page.

The funny and frustrating part is that it sometimes works and sometimes not on the same device. Mostly, it has problems with Chrome (desktop) and mobile (iOS, Android). If it works on a desktop then it may not work on a mobile, and vice versa. I also tested it a lot on my friends' devices and as might be expected some of them worked and some didn't.

I suspect a problem may be in the "On link click" section. But I don't know what's wrong there. :( I hope someone can help me.

// 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.
});

Codepen: https://codepen.io/mrWilson123/pen/VwrXebj

You can test it live here.

Upvotes: 0

Views: 695

Answers (2)

mrWilson
mrWilson

Reputation: 101

It looks like the code below did the trick. :)

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

Source: https://stackoverflow.com/a/13123626/2785140

Thanks, @mostafa. :)

Upvotes: 0

mostafa khoramnia
mostafa khoramnia

Reputation: 197

this may help you, use $(document).ready(function(){}) instead of $(window).on("load", function () {}) because you have some images and$(window).on("load", function () {}) triggers after every thing have been loaded.

more explanation : https://stackoverflow.com/a/3698214/11143288

Upvotes: 0

Related Questions