※備忘録です

今回の問題

Nuxt3でGSAPを使ったTransition実装しました。
以下のサイトを参考に、watchでTransitionを監視して完了した後にwatch内を動作させる処理までは問題なくいけました。
https://stackblitz.com/edit/nuxt-starter-bthjlg?file=pages%2Findex.vue

しかし、ASScrollのスクロールしたtransform値が遷移後に0となってしまう現象に遭遇。
これが起きると遷移した後にページ先頭に戻るため、見栄えがよくないしカクッとしてしまう。

解決したいこと

ページ遷移が始まると同時にtransform値を0にしたい(実質ページ先頭に戻す形にしたい)

解決した方法

ASScrollの再設定タイミングを以下に設置すると理想の挙動になった。

watch(
  () => transitionState.transitionComplete,
  (newValue) => {
    $asscroll.enable({ reset: true });
    if (newValue) {
      ctx.value = $gsap.context((self) => {
　　　　　　　　　//各種処理
      }, main.value); // <- Scop
    }
  }
);

■注意点
このwatchをonMountedで囲むと思い通りの挙動にならない。