Smooth Page Transition / Slot

[tiagoapp]

What's the best way to assure proper fade transition between pages on SvelteKit?

// components/PageTransition.svelte
 {#key refresh}
    <div
      in:fade="{{ duration: 400, delay: 500 }}"
     out:fade="{{ duration: 400 }}"
      >
      <slot/>
    </div>
  {/key}
  
  //+layout.svelte
  <PageTransition refresh={$page.url.pathname}>
         <slot />
 </PageTransition>

But the issue is when you first click on a page the new page content immediately appears > fades out > fades back in.

Anyway to achieve something truly like Vue's out-in?

[braebo]

In my experience, this is a limitation of the builtin transitions. I fixed it by modifying them -- for example, for fly:

	function flyfix(node, { delay = 0, duration = 400, easing: easing$1 = cubicOut, x = 0, y = 0, opacity = 0 } = {}) {
    	const style = getComputedStyle(node);
    	const target_opacity = +style.opacity;
    	const transform = style.transform === 'none' ? '' : style.transform;
->		node.style.opacity = opacity // this line fixes it by applying the opacity (default 0) right away
		node.addEventListener('introend', () => {
			node.style.opacity = style.opacity
		}, {once: true})
    	const od = target_opacity * (1 - opacity);
    	return {
    	    delay,
    	    duration,
    	    easing: easing$1,
    	    css: (t, u) => `
				transform: ${transform} translate3D(${(1 - t) * x}px, ${(.99 - t) * y}px, 0);
				opacity: ${target_opacity - (od * u)};
			`
		}
    }; 

That same fix should work for all of the transitions.

[weepy]

should this become a PR ?

[JLAcostaEC]

you need to use local in this way out:fade|local in combination with in:fade={{delay: SAME_TIME_AS_OUT_DURATION}} see https://svelte.dev/docs#template-syntax-element-directives-transition-fn-transition-events

[braebo]

@weepy does this work for you for this usecase?

[braebo]

Just curious because local is usually one of the first things I try, but when dealing with prerendered / ssr'd pages, the opacity hack has been the only reliable solution aside from custom css / js animations.

[JLAcostaEC]

I had problems with the same thing a long time ago. It was quite frustrating, but you have to keep in mind that the value must be present both in the SSR and in the CSR, you have to be careful with the #Key to use, Eg when I used reactive values inside Layout, what @tiagoappetite mentioned happened , but then when using an endpoint/load that took the value of the URL everything worked correctly

Bad

<script lang="ts">
	import { page } from '$app/stores';

	// Get the new value of URL Module and pass to PageTransition component
	let url
        $: url = $page.url; // I don't remember the $page object url prop
</script>

<PageTransition y_axysIn={100} y_axysOut={100} key={url}>
    <slot>No content Provided</slot>
</PageTransition>

Good

<!-- Module used to correctly handle the URL prop for: PageTransition.svelte component -->
<script context="module" lang="ts">
	export const load = async ({ url }) => ({ props: { url } });
</script>
<script lang="ts">
	// Get the new value of URL Module and pass to PageTransition component
	export let url
</script>

<PageTransition y_axysIn={100} y_axysOut={100} key={url}>
    <slot>No content Provided</slot>
</PageTransition>

Take in mind the new Sveltekit Changes (script context module doesn't exist now - Use layoue.server.ts instead)

[weepy]

@fractalhq acutally i've not even tried it - i was just wondering if it was a bug with the sk transitions (and hence needing a PR) or whether it might have some shortcomings.

[tiagoapp]

Great! This did actually solve the animation issue - which wasn't working even with local. But works fine now even without local by just using the url provided into the +layout.server.ts file instead