AstroでView Transitionsを使った時にJavascriptが動作しない場合
2025年02月09日
Astroには、簡単にスムーズなページ遷移を実現する「View Transition」という機能があります。自動でページ遷移の時にフェードを適用してくれるのですが、Javascriptが初回表示時しか実行されない（サイト内ページ遷移で２回目に表示した時に実行されない）という問題がが発生したので、対処方法をメモ。
バージョン
astro：5.2.5
gsap：3.12.7
ViewTransitionsの実装
ViewTransitionsをインポートしてヘッダーに<ViewTransitions />を記述するだけ。超カンタン。
---
import '../styles/global.css';
import { ViewTransitions } from 'astro:transitions';
---
<!doctype html>
<html lang="jp">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>Your Site</title>
<ViewTransitions />
</head>
<body>
<slot />
</body>
</html>問題
GSAPを使って、ページ遷移時に要素がスライドインしてくるアニメーションを実装。初回表示時には問題なく実行されますが、ページを回遊していて戻ってくると実行されません。どうやら、ViewTransitionsを導入することでAstroがSPAモードになり、JavaScriptが再度実行されないようになっているらしい。
import { gsap } from 'gsap';
const pageContainer = document.querySelector('.page__container');
gsap.fromTo(pageContainer,
{ x: '-50vw' },
{
x: '0',
duration: 2,
ease: 'power2.inOut',
}
);対処法
ページ遷移が完了するとastro:after-swapというイベントが発生します。ということで、実行したいアニメーションをslideIn関数にまとめて、初回ロード時はslideInを実行し、ページが切り替わったら（astro:after-swapが発生したら）slideInを実行するという記述にすればOK。
import { gsap } from 'gsap';
const slideIn =() => {
const pageContainer = document.querySelector('.page__container');
gsap.fromTo(pageContainer,
{ x: '-50vw' },
{
x: '0',
duration: 2,
ease: 'power2.inOut',
}
);
}
slideIn();
document.addEventListener('astro:after-swap', () => {
slideIn();
});