DEV Community

Discussion on: Simple Page Transitions with SvelteKit

View post
Collapse
 
ptyork profile image
Paul York •

Joined to (a) say thanks! and (b) provide some updates that I think are needed. At least for me with the latest SvelteKit builds.

First, during page load, I ASSUME the new page is inserted with opacity of 0 (instead of maybe "display: none") below the old page. This causes anything below the PageTransition component (footer in my case) to jump down and a scrollbar to appear or lengthen depending on the original page content. Pretty jarring. This didn't happen in an earlier build, so maybe it was a change in Svelte/SvelteKit somewhere?? Anyway, the fix was kinda tricky.

<script>
  import { fly } from 'svelte/transition';
  export let url = "";
</script>

<div class="transition-outer">
  {#key url}
    <div class="transition-inner"
        in:fly={{ y:-50, duration: 500, delay: 500 }}
        out:fly={{ y:50, duration: 500 }}>
      <slot />
    </div>
  {/key}
</div>

<style>
  .transition-outer {
    display: grid;
    grid-template: 1fr 1fr;
  }
  .transition-inner {
    grid-row: 1;
    grid-column: 1;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

I had to wrap the whole thing in a display-grid div with only a single cell and then force the content div into that cell. Bit of a hack, but it fixed the issue.

Second, definitely related to the change from page to url in the load function. The url is a URL object, not a string. At least in recent builds. SO, even when clicking on the same link (e.g., clicking on home while viewing home), the transition effect occurred since the {key} was detecting a changed object even though the underlying values remained unchanged.

ANYWAY, the fix there is easy. On the __layout page (or wherever), change the prop to be url.href. E.g.,:

  export const load = async ({ url }) => ({
    props: {
      url: url.href
    }
  });
Enter fullscreen mode Exit fullscreen mode

Now it's a plain string and behaves as expected.