svelte-3 - 如何使用 Svelte 垂直飞入和飞出元素

Question

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

<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>

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

这是一个链接到 svelte repl

Answer 1

Svelte 中的转换是使用 CSS 完成的，在这种情况下fly是通过使用transform属性来完成的。这是一个只能应用于可转换元素的属性，您可以阅读规范或作为经验法则，即只能转换块级元素。默认情况下，锚标记<a>不是块，而是内联元素。

您可以通过添加样式来解决您的问题，通过设置或<a>设置标签块级别。display: blockdisplay: inline-block