如何在 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>

这是代码的当前行为：

在页面 load/reload 上，菜单展开过渡会播放（奇怪的是，这只是有时会发生）并且在单击 link 时，菜单折叠过渡会在重定向发生时播放一瞬间.

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

提前致谢！

Answer 1

在 svelte 中，仅当组件被安装（添加到 dom）或被销毁（从 dom 中删除）时才会触发转换，因此禁用转换的唯一方法是 mount/destroy周期是不用的。

Answer 2

您可以在转换中使用 local 范围，这样它仅适用于元素为 created/destroyed 的情况，而不适用于父元素为 created/destroyed 的情况。

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

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

我对此的结果喜忧参半，最近版本的 Svelte 中修复了一些与其使用相关的错误。

https://svelte.dev/docs#Transition_events

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

How to disable transition animation on component mount and destroy in Svelte?

svelte

svelte-3

sapper

svelte-component