Как я могу предотвратить переходы от задержки загрузки страницы?

Question

У меня проблема с маршрутизацией Саппера и переходами Svelte.

Я создал небольшой сайт Sapper всего с 2 страницами. На главной странице я получил компонент Карусель. Каждый из его слайдов имеет in:fade={{duration: 2000}} и out:fade={{duration: 2000, delay: 1000}},

Когда страница загружается впервые, переход не происходит, и это идеально.

Проблема возникает, когда я перехожу к скажем / контакты, прежде чем я даже начну видеть страницу контактов, я должен ждать 3 секунды затухания. Когда переход завершен, я вижу страницу.

Это нормальное поведение? Можно ли как-то избежать этого? В итоге я использовал только CSS-переходы, но я бы предпочел использовать svelte-transition:)

Answer 1

Решение (как упомянуто в комментарии ФП) заключается в применении local Модификатор для перехода.

local Модификатор заставляет переход выполняться только тогда, когда уничтожен локальный "блок", содержащий компонент карусели, а не когда уничтожены родительские блоки (например, страница), что происходит при навигации. Это поведение подробно описано в документации API и продемонстрировано в руководстве.