如何使用Svelte实现元素的垂直飞入飞出动画？

问题分析 #

你遇到的两个核心问题：

1. 设置y:200却出现X轴移动：这是因为<a>标签默认是行内元素，浏览器对行内元素的transform支持有限，导致过渡效果异常，看起来像是沿X轴移动。
2. 没有实现从上方飞入/飞回的效果：当前设置的y:200是让元素从下方（Y轴正方向）进入，和你想要的上方飞入需求相反。

修正后的代码 #

<script>
  import { fly } from 'svelte/transition'
  let state = true
  function toggle(){
    state = !state
  }
</script>

<div style="margin-top:4rem;padding:2rem;background:lightgray">
  {#if state}
    <a 
      transition:fly="{{ y: -200, duration: 250 }}" 
      on:click={toggle} 
      href="#/link1"
      style="display: inline-block;"
    >
      link1
    </a>
  {:else}
    <a 
      transition:fly="{{ y: -200, duration: 250 }}" 
      on:click={toggle} 
      href="#/link2"
      style="display: inline-block;"
    >
      link2
    </a>
  {/if}
</div>

原理讲解 #

1. 行内元素转块级/行内块级：给<a>标签添加display: inline-block;，让浏览器可以正确应用transform: translateY()，这样Y轴的过渡效果就能正常显示了。
2. 调整fly的Y轴方向：Svelte的fly过渡中，y参数代表元素进入前（或离开后）的位置偏移量。设置y: -200意味着：
   • 进入时：元素从当前位置上方200px的地方，平滑移动到目标位置（Y轴0点）
   • 离开时：元素从当前位置，平滑移动到上方200px的位置后消失
3. 过渡的工作逻辑：Svelte的transition会自动处理元素的**进入（enter）和离开（leave）**阶段：
   • 当state变为true时，第一个<a>执行进入过渡，第二个（如果存在）执行离开过渡
   • 当state变为false时，第二个<a>执行进入过渡，第一个执行离开过渡
     你不需要手动写进入和离开的逻辑，transition指令会自动绑定这两个阶段。

进阶优化（可选） #

如果你想让进入和离开的参数不同（比如进入更快，离开更慢），可以分开指定in和out：

<a 
  in:fly="{{ y: -200, duration: 200 }}"
  out:fly="{{ y: -200, duration: 300 }}"
  on:click={toggle} 
  href="#/link1"
  style="display: inline-block;"
>
  link1
</a>

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