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

Question

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

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

Answer 1

首先让我说我不知道这是否是最有效的方法。这就是我解决问题的方法，对我来说效果很好。

我首先制作了自己的 'fade' 过渡自定义变体并将其放入 '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}`
});

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

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

<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

仅供参考 @max-larsson，根据您的代码，fadeIn 被定义为一个不需要参数的函数，returns 一个具有 duration 属性的对象等于此范围内 duration 变量的值。与 delay 相同。注意easing定义为名称，值为sineOut.

如果您只是试图在 delay 所在的位置放置文字 0，这可能是您的问题。我看到您尝试制作 delayZero，但使用方式可能与您预期的不同。您可能打算这样写：

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

当我尝试这个时，它对我来说工作得很好。感谢您分享您的示例。

Answer 3

如果你想在 _layout.svelte 中包含 transition 并且不需要在每条路由中都包含它们，这里是另一种选择。

这是一个简单的fly in/out from top transition.

 <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 布局组件

 <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) 布局组件

 <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 组件

 <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>

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

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

Here is a demo of the sample code above and the github repo

Answer 4

我猜 Svelte Kit 自从 @GiorgosK 回答以来已经发生了变化，因为我无法让它与他回答中的代码一起工作。但幸运的是，他的 github repo 已经更新了解决方案，谢谢！ page.path 属性常用于 module context

这是我的版本，没有用于页面转换的特定组件：

    <!-- src/route/__layout.svelte -->
    <script context="module">
        export const load = async ({ page }) => ({
            props: {
                key: page.path,
            },
        });
    </script>
    
    <script>
        import { fly } from "svelte/transition";
        export let key;
    </script>
    
    <nav>
        <a href="/foo">foo</a>
        <a href="/bar">bar</a>
    </nav>
    
    {#key key}
        <div
            in:fly={{ x: 50, duration: 2500 }}
            out:fly={{ y: -50, duration: 2500 }}
        >
            <slot />
        </div>
    {/key}

也许@GiorgosK 可以分享一些关于这一变化的见解。

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

How to do page transitions with svelte/sapper

sapper

svelte-transition