Astro新機能「View Transitions」

2023-10-07

#Astro

Astro 2.9 で実装された View Transitions

Astro3.0で構築した場合、何もインストールすることなく簡単にアニメーションを追加することができます。

使い方は簡単。importして、<ViewTransitions/>をhead部分に書き込むだけ。以上。

これだけで、ふわりと柔らかい感じでページ遷移してくれるようになります。

実際にやってみた

Astro公式ページ　View Transitions

https://docs.astro.build/ja/guides/view-transitions/

ここに書いてあることがすべてです。2分で完了できます。

私は、layout / BaseLayout.astroに<head>部分をすべて読み込むようにしていたので、こちらに２行挿入するだけでした。

---
import { ViewTransitions } from 'astro:transitions';
---

<ViewTransitions />

---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import { ViewTransitions } from 'astro:transitions';
import '../styles/global.css';
const {
	pageTitle,
	description = '2nd UNIT',
	image = '/img/unit2.jpeg',
} = Astro.props;
---

<html lang='ja'>
	<head>
		<meta charset='utf-8' />
		<link rel='icon' type='image/svg+xml' href='/favicon.svg' />
		<meta name='description' content={description} />
		<meta name='viewport' content='width=device-width' />
		<meta name='generator' content={Astro.generator} />
		<meta property='og:image' content={image} />
		<title>{`${pageTitle} | 2nd UNIT`}</title>
		<ViewTransitions />
	</head>
	<body>
		<Header />
		<main>
		<slot />
		</main>
		<Footer />
		<script>
			import '../scripts/menu.js';
		</script>
	</body>
</html>

問題発生：再読み込みが行われないことによる弊害<script is:inline>

<script is:inline>
ここにページトップボタンを置いていた
</script>

なぜか、ページを毎回再読み込みをしないと、ボタンが動かない。JavaScriptに問題はないはず。
検証にかなりの時間をとってしまった。

結論

View Transitionsをページ全体に読み込んでいるため、ページを遷移しても<script>が発動しない、再読み込みが行われないと判明。
addEventLisenerがきかなくなってしまったようです。

ということで、

<button transition:persist class='pagetop'>Top</button>

ボタンにtransition:persistを設定することで、発動しなくなってしまったイベントが無事、復活しました。