Как отключить анимацию перехода при монтировании и уничтожении компонентов в Svelte?
Прямо сейчас у меня есть меню, которое можно развернуть или свернуть одним нажатием кнопки гамбургера. Состояние меню по умолчанию - true, что означает, что оно расширено, но когда я перехожу к другому маршруту, где меню - not there, оно воспроизводит свернутую анимацию. Вот пример кода:
<script>
import { slide } from 'svelte/transition';
let isExpanded = true;
</script>
<button on:click = {()=>isExpanded=!isExpanded}>Expand/Collapse</button>
{#if isExpanded}
<nav transition:slide>
Content
</nav>
{/if}
<a href = "/some-page">There is no menu in this page</a>
Это текущее поведение кода:
При загрузке / перезагрузке страницы воспроизводится переход при раскрытии меню (как ни странно, это случается только иногда), а при нажатии на ссылку переход при свертывании меню воспроизводится в течение доли секунды, пока происходит перенаправление.
Я не уверен, что это ошибка или что-то не так в моей реализации. В любом случае был бы признателен, если для этого будет предоставлено временное решение.
Заранее спасибо!
Ответы 2
В svelte переходы запускаются только тогда, когда компонент либо монтируется (добавляется в дом), либо уничтожается (удаляется из домика), поэтому единственный способ отключить переход в циклах монтирования / уничтожения - не использовать его.
Вы можете использовать область local при переходе, поэтому она применяется только тогда, когда элемент создается / уничтожается, а не когда родительский элемент создается / уничтожается.
{#if isExpanded}
<nav transition:slide|local>
Content
</nav>
{/if}
В зависимости от того, как реализован ваш вариант использования перехода на новый маршрут, он может сработать или не сработать для вас.
У меня были смешанные результаты, и в последних версиях Svelte были исправлены некоторые ошибки, связанные с его использованием.