Open5

Astro+Splide+swupでいい感じに動かしたい。

ShuShu

非エンジニア(デザイナー)による開発ログ。
Astro+Splide+swupの構成でポートフォリオサイトの開発中。

  • swupを導入していい感じに遷移できるようになったがTOPページのSplideが初回以降ページ内遷移で動かなくなる。(別のページのフィルタリングのスクリプトも同様)
  • swupは遷移タイミングでmainタグを置き換えているのでAstroコンポーネント内に書いたscriptが初回以降の遷移で効かなくなるっぽい。
  • Asrtoコンポーネントに書いているスクリプトはheadタグにスクリプトとして書き出されるので、Swupで遷移した時headタグが取り残される感じで更新されずにうまくいっていないっぽい?
  • swupで用意されているreloadScriptsはtrueにしても変わらない模様。
  • TOPページのコンポーネントのスクリプトでmount()メソッドを呼び出してSplideを動かしている。なお、Splideは対象となる要素がすでにロードされている必要があるようなのでSwupで遷移した後にDOMの生成を待ってmount()を呼ぶ必要がありそう。
  • swupのhookを使ってみたが変わらず、さらにhookを使っていると遷移時のフェードの挙動が不安定になる様子。
ShuShu

SPAっぽくフェードで遷移したいだけだからAstroのView Transitionsでもいいのかも。