时间戳

首页 > 解决方案 > 如何在 Svelte 中禁用组件挂载和销毁的过渡动画？

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

这是代码的当前行为：

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

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

提前致谢！

标签： sveltesvelte-3sappersvelte-component

解决方案

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

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

取决于您如何实现去新路线的用例，它可能适合您，也可能不适合您。

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

https://svelte.dev/docs#Transition_events

推荐阅读