前提・実現したいこと
Wordpressを使用しポートフォリオサイトを制作しています。
http://o-sam.com/wp/category/illustration/
animsition.jsを使用しページの遷移をアニメーションさせているのですが、
スマホで戻るボタンやページ内のGo Backのボタンやリンクからでもページ遷移と読み込みを問題なくしたいです。
発生している問題・エラーメッセージ
animsition.jsを使用しページの遷移をアニメーションさせているのですが、
スマホで戻るボタンやページ内のGo Backのボタンやリンクを押すと ページ遷移時のアニメーションが始まるのですが終わってからページが白紙のまま止まってしまいまします。前のページに戻る javascript:history.back(); でも同様です。
また同様にwordpress移行後 仕様上大きな問題はないのですがChromeブラウザのコンソールに以下のようなエラーも出ていて解決できれば解決したいです。
Uncaught TypeError: Cannot read property 'polyfillWrapFlushCallback' of null at custom-elements-es5-adapter.js:13 at custom-elements-es5-adapter.js:13 at custom-elements-es5-adapter.js:15
animsition.jsを実行しているjsは以下です。
該当のソースコード
$(document).ready(function() {
$(".animsition-overlay").animsition({
inClass: 'overlay-slide-in-left',
outClass: 'overlay-slide-out-right',
inDuration: 1000,
outDuration: 500,
linkElement: '.animsition-link',
// e.g. linkElement: 'a:not([target="_blank"]):not([href^="#"])'
loading: true,
loadingParentElement: 'body', //animsition wrapper element
loadingClass: 'animsition-loading',
loadingInner: '', // e.g '<img src="loading.svg" />'
timeout: false,
timeoutCountdown: 5000,
onLoadEvent: true,
browser: [ 'animation-duration', '-webkit-animation-duration'],
// "browser" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
// The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
overlay : true,
overlayClass : 'animsition-overlay-slide',
overlayParentElement : 'body',
transition: function(url){ window.location.href = url; }
});
});
試したこと
戻った際に再読み込みを試みる以下のような実行文を見つけてやってみたものの変化なしでした。
window.onpageshow = function(event) {
if (event.persisted) {
window.location.reload();
}
};
補足情報(FW/ツールのバージョンなど)
ページ戻るで遷移後アニメーションが止まるのはiPhone SE上Chrome 74(現最新版?)とSafariでも同様でした。
PCではアニメーションはされてないようですがページが問題なく戻ります。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。