如何使用 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 轴上移动。

Here is a link to the svelte repl

Answer 1

Svelte 中的过渡是使用 CSS 完成的，在 fly 的情况下，这是通过使用 transform 属性完成的。这是一个只能应用于可转换元素的属性，您可以阅读specification或根据经验仅可转换块级元素.默认情况下，锚标记 <a> 不是 block 而是 inline 元素。

您可以通过添加样式来解决您的问题，通过设置 display: block 或 display: inline-block.

使 <a> 标记块级别

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

How to use svelte to vertical fly in and out element

svelte-transition

svelte-3