CODEWITHSUNDEEP
svelte
Musaffar Patel
Musaffar Patel

Reputation: 1372

Svelte fly transition simply fades

I am trying to utilize svelte's fly transition, but instead it always plays a fade transition, below is the code:

<script>
    import { fly } from 'svelte/transition';    
    let open = true;
</script>

<button on:click={() => open = !open}>Toggle</button>

{#if open}
  <div class="drawer" transition:fly={{ x: '100%' }}>
        Drawer contents...
    </div>
{/if}

<style>
    .drawer {
        position: fixed;
        top: 0;
        right: 0;
        background: #ddd;
        padding: 16px;
        height: 100vh;
        width: 200px;
        border-left: 1px solid rgba(0, 0, 0, .1);
        box-shadow: -2px 0px 6px -1px rgba(0, 0, 0, 0.1);
    }
</style>

Any ideas why it fades instead of flying in?

Upvotes: 0

Views: 1350

Answers (1)

Corrl
Corrl

Reputation: 7741

The x and y value on the transition options expect a number without unit -> REPL

<div class="drawer" transition:fly={{ x: 100 }}>

It's gonna be 100px then. Since the drawer has a fixed width of 200px set, you could or probably want to change to 200. With the fading the end is not seen anyway...

Edit: I just noticed the div doesn't have box-sizing: border-box set, so the acutal size is 200px + padding + border, so 233px

If you don't want to keep track of changing the width or padding, you could instead set up a custom transition function like this REPL It reproduces the fly transition, moves the drawer 100% of its width and the fading could be disabled if desired...

<script>
    import {cubicOut} from 'svelte/easing'
    
    function animateDrawer(node) {
        return {
            easing: cubicOut,
            css: t => `transform: translate(${100 - 100*t}%); opacity: ${1*t};`
        }
    }
    let open = true;
</script>

<button on:click={() => open = !open}>Toggle</button>

{#if open}
<div class="drawer" transition:animateDrawer>
    Drawer contents...
</div>
{/if}

<style>
    .drawer {
        position: fixed;
        top: 0;
        right: 0;
        background: #ddd;
        padding: 16px;
        height: 100vh;
        width: 200px;
        border-left: 1px solid rgba(0, 0, 0, .1);
        box-shadow: -2px 0px 6px -1px rgba(0, 0, 0, 0.1);
    }
</style>

Upvotes: 3

Related Questions