如何防止转换延迟页面加载？

Question

我遇到了与 Sapper 的路由和 Svelte 的转换有关的问题。

我创建了一个只有 2 页的小型 Sapper 网站。 在主页上，我得到了一个轮播组件。它的每张幻灯片都有一个in:fade={{duration: 2000}} 和一个out:fade={{duration: 2000, delay: 1000}}。

当页面第一次加载时没有过渡，这是完美的。

当我导航到 /contacts 时出现问题，在我开始看到联系人页面之前，我必须等待 3 秒的淡出。 转换完成后，我可以看到该页面。

这种行为正常吗？我可以以某种方式避免它吗？ 我最终只使用了 CSS 过渡，但我更喜欢使用 svelte-transition :)

Answer 1

解决方案（如the OP's comment 中所述）是将local 修饰符应用于过渡。

local 修饰符使转换仅在包含轮播组件的本地“块”被销毁时运行，而不是在父块（例如页面）被销毁时运行 - 这发生在导航上。此行为在the API documentation 中有详细说明，并在the tutorial 中进行了演示。