質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

603閲覧

animsition.jsを使って前のページ戻れない

owowowsam

総合スコア18

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

3クリップ

投稿2019/05/09 01:40

前提・実現したいこと

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ではアニメーションはされてないようですがページが問題なく戻ります。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

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

を追加したものを実行したらどうやら遷移アニメーションはすこし変ですが白紙で止まらず読み込むようになったようです。他に良い方法が分かる方いれば教えてください!

投稿2019/05/09 23:25

owowowsam

総合スコア18

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問