Test view transition api
All checks were successful
ci/woodpecker/push/build Pipeline was successful

This commit is contained in:
Alessio Davoli 2023-11-27 12:15:38 +01:00
parent 989a7be6e7
commit 732f9210e9
3 changed files with 38 additions and 5 deletions

View file

@ -6,7 +6,7 @@
<div id="image" style="background-image: url(/images/test-1.jpg" />
<div id='path-holder'>
<div style='font-size: 20px;'>Percorso</div>
<p>{route.title_it}</p>
<p class='path-name'>{route.title_it}</p>
</div>
<div id='duration-holder'>
<div style='font-size: 15px;'>Dislivello</div>
@ -61,4 +61,8 @@
font-weight: bold;
font-size: 22px;
}
.path-name {
view-transition-name: title;
}
</style>

View file

@ -1,6 +1,18 @@
<script lang="ts">
import Route from '$lib/components/Route.svelte';
import HomeHeader from '$lib/components/HomeHeader.svelte';
import { onNavigate } from '$app/navigation';
onNavigate((navigation) => {
if (!document.startViewTransition) return;
return new Promise((resolve) => {
document.startViewTransition(async () => {
resolve();
await navigation.complete;
});
});
});
export let data;
</script>
@ -8,9 +20,9 @@
<HomeHeader title={data.category}></HomeHeader>
<div>
{#each data.routes as route}
<Route {route}></Route>
{/each}
{#each [data.routes[0]] as route}
<Route {route}></Route>
{/each}
</div>
<style>

View file

@ -1,9 +1,22 @@
<script lang="ts">
import Header from '$lib/components/Header.svelte';
import Tabs from '$lib/components/Tabs.svelte';
import { onNavigate } from '$app/navigation';
export let data: App.Route;
onNavigate((navigation) => {
if (!document.startViewTransition) return;
return new Promise((resolve) => {
document.startViewTransition(async () => {
resolve();
await navigation.complete;
});
});
});
let divider;
const mapClick = () => {};
@ -16,7 +29,7 @@
<div bind:this={divider} id="divider">
<div id="banner">
<p>Percorso <b>{data.name_it}</b></p>
<p class='path-name'>Percorso <b>{data.name_it}</b></p>
<p id="duration">Dislivello {data?.route_sport_details[0]?.elevation_gain} m</p>
</div>
<Tabs on:map-click={mapClick} route={data}></Tabs>
@ -57,4 +70,8 @@
font-size: 14px;
text-align: rightìì;
}
.path-name {
view-transition-name: title;
}
</style>