transition:flyで引っかかった話

起こった現象

あるコンポーネントを使用している時にページ間を遷移したとき、

1. ページ遷移前のコンテンツがうっすら消え始める
2. ページ遷移後のコンテンツがうっすら現れ始める
3. ページ遷移前と後のコンテンツが同時に表示される
4. ページ遷移前のコンテンツが消える

このような挙動になりました。
アニメーションを実行している認識がなかったので混乱したのですが、結論以下のコードが原因でした。

<script lang="ts">
	import type { Snippet } from 'svelte';
	import { fly, type FlyParams } from 'svelte/transition';

	let {
		transition = undefined,
		children,
	}: {
		transition?: {
			fly?: FlyParams;
		};
		children: Snippet;
	} = $props();
</script>

<div transition:fly={transition?.fly}>
	{@render children()}
</div>

引っかかったポイントは
「transition:flyにundefinedが渡された時、transition:flyのデフォルト値でtransitionが実行される」 です。

理由がわかってしまえば当たり前でしたが、undefinedを渡したらtransitionが無効化されるだろうな　と思い込んでいたので気づけませんでした。

要するに以下とおなじです。

<div transition:fly>hoge</div>

transitionは非常に便利な機能ですが、transition:xxxのxxx部分を動的に切り替えたりできないなど不便な点があり、こちらのIssueで議論には上がっているようです。

同じ現象にあった人の参考になればいいなと思うので記事として残しておきます。

実際に見たい人へ

リポジトリ

問題のある例

https://svelte5-examples.pages.dev/transition/from
から
https://svelte5-examples.pages.dev/transition/to

へページ遷移してみてください。

解消した例

https://svelte5-examples.pages.dev/conditionalTransition/from
から
https://svelte5-examples.pages.dev/conditionalTransition/to

へページ遷移してみてください。