How to use svelte to vertical fly in and out element

Question

I'm trying to animate the tag. I want to make it fly from top to it's current position and and out to fly from it's current position to top.

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

I didn't understand quite well how transitions and animations work. In this case even if y it's 200 it goes on x axis.

Here is a link to the svelte repl

Answer 1

Transitions in Svelte are done using CSS, in the case of fly this is through the use of the transform property. This is a property that can only be applied to transformable elements, you could read the specification or take as rule of thumb that only block level elements can be transformed. An anchor tag <a> is by default not a block but an inline element.

You can solve your problem by adding styling making the <a> tags block level either by setting display: block or display: inline-block.