Svelte中transition:fly|local导致兄弟元素过渡失效问题求助

我有几个垂直排列的按钮，希望实现进出过渡动画，同时不阻止页面导航，因此使用了local指令，但添加该指令后原本正常的过渡动画失效了。相关代码片段如下：

<div class="absolute top-0 right-0 mt-12 flex flex-col gap-2">
  {#if $canPublish}
  <div transition:fly|local={{y: 20}}>
    <Anchor type="button-circle" on:click={openAdvanced}>
      <i class="fa fa-sliders" />
    </Anchor>
  </div>
  <div transition:fly|local={{y: 20}}>
    <Anchor type="button-circle" href={`/messages/${npub}`}>
      <i class="fa fa-envelope" />
    </Anchor>
  </div>
  {/if}
  {#if following}
  <div transition:fly|local={{y: 20}}>
    <Anchor type="button-circle" on:click={unfollow}>
      <i class="fa fa-user-minus" />
    </Anchor>
  </div>
  {:else if user.getPubkey() !== pubkey}
  <div transition:fly|local={{y: 20}}>
    <Anchor type="button-circle" on:click={follow}>
      <i class="fa fa-user-plus" />
    </Anchor>
  </div>
  {/if}
  <div transition:fly|local={{y: 20}}>
    <Anchor type="button-circle" on:click={share}>
      <i class="fa fa-share-nodes" />
    </Anchor>
  </div>
</div>

问题原因 #

Svelte的local过渡指令仅适用于元素持续存在于DOM中的场景，它负责处理元素视觉上的显示/隐藏过渡。而当前代码通过{#if}条件渲染直接添加/移除DOM元素，元素被移除时会直接从DOM中消失，local无法触发过渡动画。

方法1：改用条件显示（推荐） #

让所有按钮容器始终保留在DOM中，通过CSS控制显示隐藏，这样local指令就能正常生效，同时不会阻止页面导航。

使用Svelte的class:hidden指令（需Svelte 3.44+）修改代码：

<div class="absolute top-0 right-0 mt-12 flex flex-col gap-2">
  <!-- 用class:hidden控制显示，元素始终存在于DOM -->
  <div transition:fly|local={{y: 20}} class:hidden={!$canPublish}>
    <Anchor type="button-circle" on:click={openAdvanced}>
      <i class="fa fa-sliders" />
    </Anchor>
  </div>
  <div transition:fly|local={{y: 20}} class:hidden={!$canPublish}>
    <Anchor type="button-circle" href={`/messages/${npub}`}>
      <i class="fa fa-envelope" />
    </Anchor>
  </div>

  <div transition:fly|local={{y: 20}} class:hidden={!following}>
    <Anchor type="button-circle" on:click={unfollow}>
      <i class="fa fa-user-minus" />
    </Anchor>
  </div>
  <div transition:fly|local={{y: 20}} class:hidden={following || user.getPubkey() === pubkey}>
    <Anchor type="button-circle" on:click={follow}>
      <i class="fa fa-user-plus" />
    </Anchor>
  </div>

  <div transition:fly|local={{y: 20}}>
    <Anchor type="button-circle" on:click={share}>
      <i class="fa fa-share-nodes" />
    </Anchor>
  </div>
</div>

如果你的Svelte版本不支持class:hidden，可以手动绑定style实现相同效果：

<div transition:fly|local={{y: 20}} style="display: {!$canPublish ? 'none' : 'block'}">
  <!-- 按钮内容 -->
</div>

方法2：移除local，手动处理导航 #

如果必须通过{#if}移除DOM元素，可以去掉local指令，对带有href的锚点手动触发导航，避免过渡动画阻止页面跳转：

<div transition:fly={{y: 20}}>
  <Anchor type="button-circle" href={`/messages/${npub}`} on:click={(e) => {
    e.preventDefault();
    window.location.href = e.currentTarget.href;
  }}>
    <i class="fa fa-envelope" />
  </Anchor>
</div>

内容的提问来源于stack exchange，提问作者jstaab