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

Question

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

我创建了一个只有2页的小型Sapper网站。在主页上，我得到了一个Carousel组件。它的每个幻灯片都有一个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中进行了演示。