如何使用Svelte / Sapper执行页面转换

Question

我想在Sapper中实现一个简单的页面（路由）转换。例如，使用Nuxt可以轻松实现。有谁知道如何通过Sapper实现这一点？

我已经使用transition：fade指令将页面内容包装到div中。这可行。但是，这两页同时转换，这意味着一页过渡出来，另一页已经过渡。如果有人指出我正确的方向，那就太好了。谢谢！

Answer 1

让我开始说，我不知道这是否是最有效的方法。这是我解决问题的方法，对我来说非常有用。

我首先对“ fade”过渡进行了自己的自定义变体，然后将其放入“ components / pageFade.js”中

implementation 'com.android.support:recyclerview-v7:29.0.0'
implementation 'com.android.support:cardview-v7:29.0.0'

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

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

{{1}}

然后我将其用作几乎每个页面上的模板，这看起来很多，但还算不错。

希望有帮助，如果您还有其他问题，请告诉我！

最大

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}

这是布局组件

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

<script>
  import Nav from '../components/Nav';
  import PageTransitions from '../components/PageTransitions';
  export let segment;   
</script>

<Nav {segment}/>

<PageTransitions refresh={segment}>
  <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>

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

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

Here is a demo和上面的示例代码github repo

Answer 3

FYI @max-larsson，根据您的代码，fadeIn被定义为一个不需要参数的函数，并且返回一个对象，该对象的duration属性等于{{1}的值}在此范围内。与duration相同。注意delay被定义为名称，其值为easing。

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

delayZero

当我尝试此操作时，对我来说效果很好。感谢您分享您的示例。

Answer 4

我猜自从@GiorgosK 回答以来，Svelte Kit 已经改变了，因为我无法使用他回答中的代码。 但幸运的是，他的 github repo 已经更新了解决方案，谢谢！ echo substr($str1, 0, 3) . "\n"; 属性在 module context

中经常使用

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

page.path

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