苗条的飞行过渡只是淡化

Question

我正在尝试使用 svelte 的飞行过渡，但它总是播放淡入淡出过渡，下面是代码：

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

知道为什么它会消失而不是飞入吗？

Answer 1

过渡选项上的 x 和 y 值需要一个没有单位的数字 -> REPL

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

那会是100px。由于抽屉的固定宽度设置为 200px，您可以或可能想要更改为 200。随着褪色，无论如何都看不到末端...

编辑：我刚刚注意到 div 没有设置 box-sizing: border-box，所以实际大小是 200px + padding + border，所以 233px

如果您不想跟踪更改宽度或填充，您可以改为设置自定义过渡函数，如下所示 REPL 它重现飞行过渡，将抽屉移动 100%如果需要，可以禁用宽度和褪色...

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

苗条的飞行过渡只是淡化

Svelte fly transition simply fades

svelte