Sapper 在彼此下方加载页面

Question

我有一个 sapper/svelte 应用程序，当我从我的个人资料页面导航到另一个页面（比方说主页）时，主页会瞬间加载到个人资料页面下方。然后正常加载。

点击回家之前：

点击主页后link：

这对我来说很疯狂，我不知道发生了什么事？？

一瞬间后，个人资料页面消失，主页正确显示。

Answer 1

一种解释可能是您在页面的外部元素上使用了 transition。

例如，当使用 Svelte 提供的 fade 过渡时，同时淡入和淡出的元素（例如为了相互替换）对于过渡的持续时间。

为避免此行为，您需要在淡入的元素上添加一个 delay，对应于淡出过渡的持续时间。这将导致新元素仅在旧元素已从 DOM.

中移除时才可见

举个例子：

<main in:fade={{ delay: 100, duration: 100 }} out:fade={{ duration: 100}}>

有关转换参数的更多信息，请参阅 Svelte docs。