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

【问题标题】：How to disable transition animation on component mount and destroy in Svelte?如何在 Svelte 中禁用组件挂载和销毁的过渡动画？
【发布时间】：2021-06-26 20:47:23
【问题描述】：

现在，我有一个菜单，单击汉堡按钮可以展开或折叠。菜单的默认状态是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 svelte-3 sapper svelte-component

【解决方案1】：

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

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

根据您使用新路线的用例是如何实现的，它可能适合您，也可能不适合您。

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

https://svelte.dev/docs#Transition_events

【讨论】：

【解决方案2】：

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

【讨论】：