ページ遷移時にフェードイン・アウト

Question

https://digipress.info/tech/page-transition-effect-how-to/

上記サイトを参考に、ページ遷移時にフェードイン・アウトを実装しました。
しかし、firefoxでブラウザの戻るで前ページに戻ると真っ白いままになっています。

$(function() {
  // ハッシュリンク(#)と別ウィンドウでページを開く場合はスルー
  $('a:not([href^="#"]):not([target])').on('click', function(e){
    e.preventDefault(); // ナビゲートをキャンセル
    url = $(this).attr('href'); // 遷移先のURLを取得
    if (url !== '') {
      $('body').addClass('fadeout');  // bodyに class="fadeout"を挿入
      setTimeout(function(){
        window.location = url;  // 0.8秒後に取得したURLに遷移
      }, 800);
    }
    return false;
  });
});

下記の部分がfirefoxだブラウザバックと実行されません。

$('body').addClass('fadeout');

どなたかご教授ください。

Comments

[Lhankor_Mhy]

当方の環境ですと、Firefox だけではなくて、Chrome のブラウザバックでも同様に、真っ白になってからのフェードインでした。
といいますか、ブラウザバックの検出は難しいので、そういうものだと思いますよ。

[siruku6]

デモのサイト（https://digipress.info/demo/page-transition/one.html）自体も、このページから他のページに（ブックマークなどで）遷移した後、戻るボタンで戻ったところ、フェードイン・アウトの動作はしませんでした。

ということなので、初期表示として表示しておいたものがそのまま表示されたままになっていると考えるのが妥当そうです。

初期表示が真っ白になるように作成されているのであれば、それが正常な動作ですね。

Answer 1

私の環境でも再現しました。また、参考サイトのデモをFireFoxで開いても再現しました。どうやら、FireFoxでは戻るボタンを押した時にonloadイベントが呼ばれないようです。
(※)参考：https://qiita.com/rita_cano_bika/items/ae9ea9b68fa971b41a1e

私の環境では、$('body').addClass('fadeout');が実行されないというより、javaScriptの処理そのものが実行されていないように見えました。試しにjsファイルを次のように書いたら、戻るボタンでも表示されました。

//firefoxの戻るボタンで遷移した時
window.onpageshow = function(){
  $('body').removeClass('fadeout');
}
$(function() {
  // ハッシュリンク(#)と別ウィンドウでページを開く場合はスルー
  $('a:not([href^="#"]):not([target])').on('click', function(e){
    e.preventDefault(); // ナビゲートをキャンセル
    url = $(this).attr('href'); // 遷移先のURLを取得
    if (url !== '') {
      $('body').addClass('fadeout');  // bodyに class="fadeout"を挿入
      setTimeout(function(){
        window.location = url;  // 0.8秒後に取得したURLに遷移
      }, 800);
    }
    return false;
  });
});

FireFoxの戻るボタンで遷移したときはwindow.onpageshowが呼ばれ、body要素からfadeoutクラスを除外しています。