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

这是代码的当前行为：

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

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

提前致谢！

解决方法

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

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

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

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

https://svelte.dev/docs#Transition_events

,

仅当组件被挂载（添加到 dom）或销毁（从 dom 中删除）时才会触发 In svelte 转换，因此在挂载/销毁循环中禁用转换的唯一方法是不使用它。>