Svelte 3 如何使用苗条垂直飞入和飞出元素

我正在尝试设置标签的动画。我想让它从顶部飞到当前位置，然后再从当前位置飞到顶部

<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">
                link1
         </a>
    {:else}
         <a transition:fly="{{ y: 200, duration: 250 }}" 
                on:click={toggle} href="#/link2">  
                link2
         </a>
    {/if}

</div>

从“苗条/过渡”导入{fly}
让状态=真
函数切换（）{
state=！state
}
{#如果是州}
{:else}
{/if}

我不太了解过渡和动画是如何工作的。在这种情况下，即使y是200，它也在x轴上

---

苗条的过渡是使用CSS完成的，在

飞行

的情况下，这是通过使用

变换

属性完成的。这是一个只能应用于可转换元素的属性，您可以阅读或采用仅可转换块级元素的经验法则。默认情况下，锚定标记不是块，而是内联元素

通过设置

display:block

或

display:inline block

，可以添加样式，使

标记达到块级别，从而解决问题