如何在 Svelte 中禁用父组件挂载和销毁的过渡动画？

Question

现在，我有一个菜单，只需单击汉堡包按钮就可以展开或折叠。菜单的默认状态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>

这是代码的当前行为：

在页面加载/重新加载时，菜单展开过渡会播放（奇怪的是，这种情况只有时发生），并且单击链接时，菜单折叠过渡会在重定向发生时播放一瞬间。

我不确定这是否是我的实现中的错误或错误。无论哪种情况，如果为此提供解决方法，我们将不胜感激。

提前致谢！

Answer 1

您可以local在转换上使用范围，因此它仅在创建/销毁元素时应用，而不是在创建/销毁父元素时应用。

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

根据您前往新路线的用例的实施方式，它可能适合您，也可能不适合您。

我对此的结果好坏参半，并且 Svelte 的最新版本中修复了一些与其使用相关的错误。

https://svelte.dev/docs/element-directives#transition-events

2023年6月23日编辑：

在 Svelte 4 中，|local范围现在是过渡的默认值。

要使它们全局化，请使用|global.