CODEWITHSUNDEEP
svelte-3svelte-transition
Alin Climente
Alin Climente

Reputation: 137

How to use svelte to vertical fly in and out element

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

Upvotes: 0

Views: 1811

Answers (1)

Stephane Vanraes
Stephane Vanraes

Reputation: 16451

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.

Upvotes: 2

Related Questions