現在サイト制作を行なっており、下記のサイトを参考にしてページ遷移の際にフェードイン・アウトを入れる処理をしています。
https://digipress.info/tech/page-transition-effect-how-to/
前提・実現したいこと
ページ遷移のときに白くフェードイン・アウトする処理をしたい。
戻るボタンを押して遷移したときも同様。
発生している問題
実装自体はできたのですが、ブラウザの「戻る」ボタンを押して遷移した時だけremoveClassが作動せずに画面が白いままとなってしまいます。
下記サイトを参考にしてみたのですが、Safariだけ状況が改善されませんでした。
https://teratail.com/questions/212957
ソースコード
//firefoxの戻るボタンで遷移した時 window.onpageshow = function () { $('body').removeClass('fadeout'); } window.addEventListener('popstate', function (back) { $('body').removeClass('fadeout'); }); history.replaceState(null, document.getElementsByTagName('title')[0].innerHTML, null); window.addEventListener('popstate', function (safariback) { $('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; }); });
どなたかご教示いただけると幸いです。
よろしくお願いいたします。
その他参考にしたサイト・記事
https://techacademy.jp/magazine/22422
https://yutaihara.com/archives/512
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。