sapper - 如何使用 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}`
});

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>

然后我会在几乎每一页上使用它作为模板，这看起来很多，但还不错。
希望它有所帮助，如果您有任何其他问题，请告诉我!
最大限度