如何防止过渡延迟页面加载？

Question

我有一个与 Sapper 的路由和 Svelte 的转换相关的问题。

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

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

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

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

Answer 1

解决方案（如OP的评论中提到的）是将local修饰符应用于转换。

\n\n

修饰符local导致转换仅在包含轮播组件的本地“块”被销毁时运行，而不是在导航时发生的父块（例如页面）被销毁\xe2\x80\x93 时运行。API 文档中详细介绍了此行为，并在教程中进行了演示。

\n