Как отключить анимацию перехода при монтировании и уничтожении компонентов в 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 sapper svelte-3 svelte-component
person rohanharikr    schedule 30.03.2021    source источник

Ответы (2)


arrow_upward
2
arrow_downward

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

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

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

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

https://svelte.dev/docs#Transition_events

person ianmjones    schedule 31.03.2021

arrow_upward
0
arrow_downward

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

person Ryuman    schedule 30.03.2021