Как отключить анимацию перехода при монтировании и уничтожении компонентов в 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>

Это текущее поведение кода:

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

Я не уверен, что это ошибка или что-то не так в моей реализации. В любом случае был бы признателен, если для этого будет предоставлено временное решение.

Заранее спасибо!

🤔 А знаете ли вы, что...
Svelte имеет множество плагинов для расширения его функциональности.


27
2

Ответы:

В svelte переходы запускаются только тогда, когда компонент либо монтируется (добавляется в дом), либо уничтожается (удаляется из домика), поэтому единственный способ отключить переход в циклах монтирования / уничтожения - не использовать его.


Решено

Вы можете использовать область local при переходе, поэтому она применяется только тогда, когда элемент создается / уничтожается, а не когда родительский элемент создается / уничтожается.

{#if isExpanded}
  <nav transition:slide|local>
   Content
  </nav>
{/if}

В зависимости от того, как реализован ваш вариант использования перехода на новый маршрут, он может сработать или не сработать для вас.

У меня были смешанные результаты, и в последних версиях Svelte были исправлены некоторые ошибки, связанные с его использованием.

https://svelte.dev/docs#Transition_events