面试题：Svelte中fly过渡的基础使用

Question

在Svelte中，如何使用fly过渡让一个元素从页面右侧平滑飞入。请给出相关的Svelte代码示例，并解释每个关键部分的作用。

Answer 1

1. Svelte代码示例

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

{#if showElement}
    <div transition:fly="{{ x: window.innerWidth, duration: 1000 }}">
        从右侧平滑飞入的元素
    </div>
{/if}

2. 关键部分解释
   • import { fly } from'svelte/transition';：从Svelte的transition模块中导入fly过渡函数，fly过渡可以实现元素沿着指定方向的位移、缩放和旋转等动画效果。
   • let showElement = true;：定义一个布尔变量showElement，用于控制元素的显示与隐藏，进而触发过渡效果。
   • transition:fly="{{ x: window.innerWidth, duration: 1000 }}"：
     • x: window.innerWidth：指定元素从右侧开始飞入，x属性表示元素在水平方向上的起始位置，window.innerWidth获取浏览器窗口的宽度，意味着元素初始位置在窗口右侧之外。
     • duration: 1000：设置过渡动画的持续时间为1000毫秒（即1秒），使得元素以平滑的速度飞入。