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

Question

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

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

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

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

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

Answer 1

解决方案（如OP 的评论中所述）是将local修饰符应用于过渡。

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