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

Question

我遇到了Sapper的路由和Svelte的过渡相关的问题。

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

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

当我导航到/ contacts时，问题就来了，在我什至开始看到“ Contacts”页面之前，我必须等待3秒钟淡出。 过渡完成后，我可以看到页面。

这种行为正常吗？我可以以某种方式避免它吗？ 我最终只使用CSS转换，但更喜欢使用svelte-transition：）

Answer 1

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

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