스벨테에서 상위 구성 요소 마운트 및 파괴에서 전환 애니메이션을 비활성화하는 방법은 무엇입니까?

나는 지금 햄버거 버튼을 클릭하면 펼치거나 접을 수 있는 메뉴를 가지고 있다. 메뉴의 기본 상태는 확장됨을 의미하지만 메뉴가 있는 다른 경로로 이동하면 축소된 애니메이션이 재생됩니다. 다음은 샘플 코드입니다:

<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>

다음은 코드의 현재 동작입니다:

페이지 로드/재로드 시 메뉴 확장 전환이 재생되고(이상하게는 가끔만 실행됨), 링크를 클릭하면 리디렉션이 실행되는 동안 메뉴 축소 전환이 몇 초 동안 재생됩니다.

나는 이것이 버그인지 아니면 내 구현에 잘못된 것인지 확신할 수 없다. 어느 경우든 이에 대한 해결책을 제공해 주시면 감사하겠습니다.

잘 부탁드립니다!

인스벨트 전환은 구성 요소가 마운트(돔에 추가)되거나 제거(돔에서 제거)된 경우에만 트리거되므로 마운트/파괴 주기에서 전환을 비활성화하는 유일한 방법은 이를 사용하지 않는 것입니다.

전환에서 스코프를 사용하여 요소가 생성/삭제될 때만 적용되고 상위 요소가 생성/삭제될 때는 적용되지 않도록 할 수 있습니다.

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

새로운 경로로 이동하는 사용 사례가 구현되는 방식에 따라 사용자에게 효과가 있을 수도 있고 그렇지 않을 수도 있습니다.

나는 이것과 혼합된 결과를 얻었고, 최근 스벨테 버전의 사용과 관련하여 몇 가지 버그 수정이 있었다.

https://svelte.dev/svd/svd-directions #transition-modies

2023-06-23 편집:

Svelte 4의 경우 스코프는 전환용입니다.

사용자를 전역으로 설정하려면 를 사용합니다.