Nuxt.jsでのページ遷移のエフェクトがうまく動作しない

Question

https://b-risk.jp/blog/2019/12/nuxt-js/

こちらのサイトで解説されている方法を利用して、こちらのデモページを模倣しようとしました。
しかし、以下が解決できませんでした。

• ページ遷移前に、画面の位置がトップに戻らない。下記のコードが正常に実行されない様子。

#pages/index.vue

// ページを上部に移動
anime({
    targets: '#__nuxt',
    scrollTop: 0,
    easing: 'easeInOutQuart',
    duration: 800,
    complete: () => {
        console.log("scrollTop complete")
    }
});

• スマートフォンで開くと、遷移後のページの下部に、無駄な空間が出来てしまっている。(おそらくダミー画像があったため)

(一覧ページに戻る際のエフェクトは未着手のため、今後新たな課題が発生するかもしれません)

---

処理の流れは、以下の通りと解釈しております。
間違っておりましたら、ご指摘下さい。

1. 一覧ページにて、クリックした画像の情報(top, left, src)を取得。
2. その情報を基に、Layoutsページにダミー画像を作成。(クリックした画像と同一位置に配置される)
3. 詳細ページへの遷移前に、画面スクロールを上端に戻す。
4. 一覧ページの透過率を0にアニメーションさせる。
5. 透過率が0になったら、詳細ページに遷移する。
6. 詳細ページでの詳細画像の情報(top, left, width)を取得する。
7. その情報へダミー画像をアニメーションさせる。
8. 詳細ページの透過率を1にアニメーションさせる。(今回は、元々のページを透過率0で作成した) その際、詳細画像の透過率だけは0のまま。
9. ダミー画像と詳細ページのアニメーションが完了したら、詳細画像の透過率を1にする。
10. ダミー画像を削除する。(top,left,widthをnullや''にする)

---

色々と試行錯誤したので、かなり汚いですが、こちらがリポジトリです。
https://github.com/ottonove/animation_page_transition

解決のためのご助言を下さると幸いです。

また、vue.js及びnuxt.jsも、まだ触り始めたばかりで、正直雰囲気で使っている部分も多いですので、
正しい使用方法などをご教授頂けると幸いです。

宜しくお願い致します。

Comments

[tetosept]

自分の環境で動かしてみた結果、画像をクリックした際に問題なくページ上部にスクロールするようになっておりました。
エラーも出てなかったのですが、こちら改善されたということでしょうか

[gomigorou]

tetosept様、ご確認下さいまして、誠にありがとうございます！
この投稿後も引き続き問題解決の調査を行い、解決のための情報が見つかり、リポジトリにそれを反映しました。
自己解決を記入する前に入れ違いになってしまい、大変申し訳ございませんでした。

Answer 1

画面TOPにスクロールしない問題は、以下の設定に変更したところ、解決しました。
targetsが異なるものを指していた様です。

const scrollElement = window.document.scrollingElement || window.document.body || window.document.documentElement;

anime({
  targets: scrollElement,
  scrollTop: 0,
  easing: 'easeInOutQuart',
  duration: 800,
  complete: () => {
    console.log("scrollTop complete")
  }
});

また、スマートフォン表示での無駄な空間が出来てしまう問題も、画像の表示サイズを調整する事で発生しなくなりました。