Анимация перехода в Inertia

Пусть при переходе между двумя экранами постов картинка не сменяется резко: браузер может сам провести короткую анимацию между старым и новым состоянием страницы.

Для этого Inertia использует API View Transitions браузера. У Link есть атрибут viewTransition: в шаблоне Vue его пишут как view-transition, и при клике визит сопровождается переходом между снимками экрана, если браузер эту возможность поддерживает.

Давайте опишем соседние страницы постов:

<?php
	use Illuminate\Support\Facades\Route;
	use Inertia\Inertia;

	Route::get('/posts', function () {
		return Inertia::render('Posts/Index', [
			'title' => 'Posts',
		]);
	});

	Route::get('/posts/gallery', function () {
		return Inertia::render('Posts/Gallery', [
			'title' => 'Gallery',
		]);
	});
?>

Давайте включим анимацию на ссылке в галерею:

<script setup>
	import { Link } from '@inertiajs/vue3'

	defineProps({
		title: String,
	})
</script>

<template>
	<h1>{{ title }}</h1>
	<Link href="/posts/gallery" view-transition>
		Open gallery
	</Link>
</template>

Сделайте переход с панели работника Sofia на её календарь с плавной сменой экрана.