Сапер загружает страницы друг под другом

Question

У меня есть приложение sapper / svelte, которое, когда я перехожу со страницы своего профиля на другую страницу (скажем, домой), домашняя страница загружается под страницей профиля на долю секунды. Затем загружается нормально.

Перед нажатием на go home:

После нажатия ссылки на домашнюю страницу:

Это безумие для меня, и я понятия не имею, что происходит ??

Через долю секунды страница профиля исчезает, а домашняя страница отображается правильно.

Answer 1

Одним из объяснений может быть использование transition s на внешних элементах страниц.

При использовании, например, перехода fade, предоставляемого Svelte, элементы, которые постепенно появляются и исчезают в в одно и то же время (например, чтобы заменить друг друга) оба будут видны на протяжении перехода.

Чтобы избежать такого поведения, вам нужно добавить delay к элементу, который постепенное нарастание, соответствующее длительности перехода на постепенное исчезновение. Это приведет к тому, что новый элемент будет виден только тогда, когда старый элемент уже удален из DOM.

В качестве примера:

<main in:fade={{ delay: 100, duration: 100 }} out:fade={{ duration: 100}}>

См. Svelte docs для получения дополнительной информации о параметрах перехода.