如何使用 svelte/sapper 进行页面转换

Question

我想在 Sapper 中实现一个简单的页面（路由）转换。例如，使用 Nuxt 很容易实现的东西。有谁知道如何使用 Sapper 实现这一点？

我已经使用 transition:fade 指令将我的页面内容包装到一个 div 中。这有效。然而，这两个页面同时转换，这意味着当一个页面转换出另一个页面时，另一个已经转换了。如果有人指出我正确的方向，那就太好了。谢谢！

Answer 1

首先让我说我不知道​​这是否是最有效的方法。这就是我解决它的方式，它对我很有用。

我首先制作了我自己的“淡入淡出”过渡的自定义变体，并将其放在“components/pageFade.js”中

import { sineOut } from "svelte/easing";

let duration = 250;
let delay = duration;

let delayZero = 0;

export const fadeIn = _ => ({
  duration,
  delay,
  easing: sineOut,
  css: t => `opacity: ${t}`
});
export const fadeOut = _ => ({
  duration,
  delay: delayZero,
  easing: sineOut,
  css: t => `opacity: ${t}`
});

1. delayZero 变量在那里是因为出于某种原因它不会直接取 '0' 并且会中断。
2. 持续时间变量是以毫秒为单位的淡入淡出的长度

然后对于我想要进行此转换的所有文件，我执行了以下操作：

<script>
  import { fadeIn, fadeOut } from "../components/pageFade";

  // All your other JS goes here
</script>

<style>
  /* Styles go here */
</style>

<main in:fadeIn out:fadeOut>
  <!-- All the normal HTML goes here -->
</main>

然后我会在几乎每一页上使用它作为模板，这看起来很多，但还不错。

希望它有所帮助，如果您有任何其他问题，请告诉我！

最大限度

Answer 2

如果你想在 _layout.svelte 中包含过渡并且不需要在每条路线中包含它们，这里是一个替代方案。

这是从顶部过渡的简单飞入/飞出。

<!-- src/component/PageTransitions.svelte -->
<script>
  import { fly } from 'svelte/transition';
  export let refresh = '';
</script>

{#key refresh}
  <div
    in:fly="{{ y: -50, duration: 250, delay: 300 }}"
    out:fly="{{ y: -50, duration: 250 }}" 
    >
    <slot/>
  </div>
{/key}

这是 Sapper布局组件

<!-- src/routes/_layout.svelte for Sapper -->

<script>
  import { page } from '$app/stores'; // svelte@next
  import Nav from '../components/Nav';
  import PageTransitions from '../components/PageTransitions';
  export let segment;
</script>

<Nav {segment}/>

<PageTransitions refresh={segment}>
  <slot/>
</PageTransitions>

这是 SvelteKit (svelte@next)布局组件

<!-- src/routes/$layout.svelte for Svelte@next -->

<script>
  import { page } from '$app/stores'; // svelte@next
  import Nav from '../components/Nav';
  import PageTransitions from '../components/PageTransitions';
</script>

<Nav segment={$page.path}/>

<PageTransitions refresh={$page.path}>
  <slot/>
</PageTransitions>

为了完整起见，这里是一个简单的Nav组件

<!-- src/component/Nav.svelte -->
<script>
    export let segment;
</script>

<style>
  a {
    text-decoration: none;
  }
  .current {
    text-decoration: underline;
  }
</style>
<div>
  <a href="/" class='{segment === undefined ? "current" : ""}'>Home</a>
  <a href="/about" class='{segment === "about" ? "current" : ""}'>About</a>
</div>

注意： 我们通过创建refreshprop 和 usingkey指令使组件具有反应性，这意味着当键更改时，svelte 删除组件并添加一个新组件，从而触发转换。

在布局组件中，我们将段（路线）作为refresh道具传递，因此刷新键会随着路线的变化而变化。

这是上面示例代码和github repo的演示