Svelte 内置过渡效果详解：fade、fly 和 slide 的使用指南

Svelte 内置过渡效果之 fade

在 Svelte 中，fade 过渡效果用于实现元素的淡入淡出效果。这在许多场景中都非常有用，比如显示或隐藏模态框、提示信息等。

fade 的基本使用

使用 fade 过渡效果非常简单。假设我们有一个按钮，点击按钮来显示或隐藏一个段落。下面是实现这个功能的代码：

<script>
    let visible = false;
</script>

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

{#if visible}
    <p transition:fade>
        这是一个使用 fade 过渡效果的段落。当按钮被点击时，这个段落会淡入或淡出。
    </p>
{/if}

在上述代码中，我们定义了一个布尔变量 visible 来控制段落的显示与隐藏。通过 transition:fade 语法，我们为 p 元素添加了淡入淡出的过渡效果。当 visible 从 false 变为 true 时，段落会淡入；反之，当 visible 从 true 变为 false 时，段落会淡出。

fade 的参数配置

fade 过渡效果还支持一些参数配置，以定制过渡的具体行为。

duration：用于指定过渡效果的持续时间，单位为毫秒。例如，我们可以将淡入淡出的时间设置为 1000 毫秒（1 秒）：

<script>
    let visible = false;
</script>

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

{#if visible}
    <p transition:fade="{{duration: 1000}}">
        这个段落的淡入淡出时间为 1 秒。
    </p>
{/if}

在这个例子中，duration: 1000 表示淡入和淡出的整个过程将持续 1 秒。

delay：可以设置过渡效果开始前的延迟时间，同样以毫秒为单位。比如，我们想让段落淡入前延迟 500 毫秒：

<script>
    let visible = false;
</script>

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

{#if visible}
    <p transition:fade="{{delay: 500, duration: 1000}}">
        这个段落会在按钮点击 500 毫秒后开始淡入，淡入过程持续 1 秒。
    </p>
{/if}

这里，delay: 500 使得段落淡入效果在按钮点击 500 毫秒后才开始，而 duration: 1000 规定了淡入过程持续 1 秒。

easing：用于指定过渡的缓动函数，它决定了过渡过程中速度的变化。Svelte 提供了一些内置的缓动函数，如 linear（线性变化）、ease（默认缓动）、easeIn、easeOut、easeInOut 等。以 easeIn 为例，它会使过渡效果在开始时较慢，然后逐渐加快：

<script>
    import {easeIn} from'svelte/easing';
    let visible = false;
</script>

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

{#if visible}
    <p transition:fade="{{duration: 1000, easing: easeIn}}">
        这个段落使用 easeIn 缓动函数进行淡入淡出。
    </p>
{/if}

在代码中，我们从 svelte/easing 导入了 easeIn 缓动函数，并将其应用到 fade 过渡效果中。

fade 的实现原理

从本质上来说，fade 过渡效果是通过操作元素的 opacity 属性来实现的。当元素开始淡入时，opacity 从 0 逐渐增加到 1；而在淡出时，opacity 从 1 逐渐减少到 0。Svelte 利用 CSS 的过渡（transition）属性来控制这个变化过程，通过设置 duration、delay 和 easing 等参数，精确地调整 opacity 的变化速率和时机。

例如，在内部实现中，Svelte 可能会为淡入过程生成类似如下的 CSS 样式：

.my-fade-enter {
    opacity: 0;
    transition: opacity 1000ms ease;
}

.my-fade-enter-active {
    opacity: 1;
}

对于淡出过程，则类似：

.my-fade-leave {
    opacity: 1;
    transition: opacity 1000ms ease;
}

.my-fade-leave-active {
    opacity: 0;
}

这里的 1000ms 对应我们设置的 duration，ease 对应 easing。my - fade - enter 和 my - fade - leave 分别表示淡入和淡出的起始状态，my - fade - enter - active 和 my - fade - leave - active 表示淡入和淡出过程中的活动状态。Svelte 会根据元素的显示与隐藏状态，自动为元素添加或移除这些类名，从而实现淡入淡出的过渡效果。

Svelte 内置过渡效果之 fly

fly 过渡效果在 Svelte 中用于实现元素的移动过渡，元素可以从一个位置移动到另一个位置，同时可以伴随着淡入淡出、缩放等效果，这使得界面元素的出现和消失更加生动。

fly 的基本使用

我们以一个简单的示例来展示 fly 的基本用法。假设有一个按钮，点击按钮后一个方块从屏幕左上角飞到屏幕中心。代码如下：

<script>
    let visible = false;
</script>

<button on:click={() => visible =!visible}>Fly the box</button>

{#if visible}
    <div style="width: 100px; height: 100px; background-color: blue" transition:fly>
        这是一个会飞的方块。
    </div>
{/if}

在上述代码中，通过 transition:fly 为 div 元素添加了 fly 过渡效果。当按钮被点击，visible 变为 true 时，方块会从初始位置（左上角，因为没有设置起始位置，默认从左上角开始）飞到其在文档流中的最终位置（屏幕中心，这里是因为方块在文档流中的布局位置决定）。

fly 的参数配置

fly 过渡效果支持多个参数来定制其行为。

x 和 y：用于指定元素在水平和垂直方向上的移动距离。正值表示向右和向下移动，负值表示向左和向上移动。例如，我们让方块从左上角飞到右下角：

<script>
    let visible = false;
</script>

<button on:click={() => visible =!visible}>Fly the box</button>

{#if visible}
    <div style="width: 100px; height: 100px; background-color: blue" transition:fly="{{x: window.innerWidth - 100, y: window.innerHeight - 100}}">
        这个方块从左上角飞到右下角。
    </div>
{/if}

在这个例子中，x: window.innerWidth - 100 表示方块在水平方向上移动到窗口宽度减去方块宽度的位置，y: window.innerHeight - 100 表示在垂直方向上移动到窗口高度减去方块高度的位置，从而实现从左上角飞到右下角。

duration：与 fade 中的 duration 类似，用于指定过渡效果的持续时间。比如，我们将方块飞行的时间设置为 2000 毫秒（2 秒）：

<script>
    let visible = false;
</script>

<button on:click={() => visible =!visible}>Fly the box</button>

{#if visible}
    <div style="width: 100px; height: 100px; background-color: blue" transition:fly="{{x: window.innerWidth - 100, y: window.innerHeight - 100, duration: 2000}}">
        这个方块飞行过程持续 2 秒。
    </div>
{/if}

这里，duration: 2000 使得方块从起始位置飞到目标位置的整个过程持续 2 秒。

delay：同样用于设置过渡效果开始前的延迟时间。例如，延迟 1000 毫秒（1 秒）后方块开始飞行：

<script>
    let visible = false;
</script>

<button on:click={() => visible =!visible}>Fly the box</button>

{#if visible}
    <div style="width: 100px; height: 100px; background-color: blue" transition:fly="{{x: window.innerWidth - 100, y: window.innerHeight - 100, delay: 1000, duration: 2000}}">
        这个方块会在按钮点击 1 秒后开始飞行，飞行过程持续 2 秒。
    </div>
{/if}

delay: 1000 使得方块在按钮点击 1 秒后才开始其飞行过渡。

easing：与 fade 中的 easing 作用相同，用于指定缓动函数。例如，使用 easeOut 缓动函数，让方块在飞行结束时速度逐渐减慢：

<script>
    import {easeOut} from'svelte/easing';
    let visible = false;
</script>

<button on:click={() => visible =!visible}>Fly the box</button>

{#if visible}
    <div style="width: 100px; height: 100px; background-color: blue" transition:fly="{{x: window.innerWidth - 100, y: window.innerHeight - 100, duration: 2000, easing: easeOut}}">
        这个方块使用 easeOut 缓动函数飞行。
    </div>
{/if}

我们从 svelte/easing 导入 easeOut 并应用到 fly 过渡效果中。

scale：用于设置元素在飞行过程中的缩放比例。例如，让方块在飞行过程中从 0.5 倍大小缩放至 1 倍大小：

<script>
    let visible = false;
</script>

<button on:click={() => visible =!visible}>Fly the box</button>

{#if visible}
    <div style="width: 100px; height: 100px; background-color: blue" transition:fly="{{x: window.innerWidth - 100, y: window.innerHeight - 100, duration: 2000, scale: 0.5}}">
        这个方块在飞行过程中从 0.5 倍大小缩放至 1 倍大小。
    </div>
{/if}

这里，scale: 0.5 表示方块起始缩放比例为 0.5，在飞行过程中逐渐缩放至 1（默认最终缩放比例）。

opacity：可以控制元素在飞行过程中的透明度变化。比如，让方块在飞行过程中从透明（opacity: 0）变为不透明（opacity: 1）：

<script>
    let visible = false;
</script>

<button on:click={() => visible =!visible}>Fly the box</button>

{#if visible}
    <div style="width: 100px; height: 100px; background-color: blue" transition:fly="{{x: window.innerWidth - 100, y: window.innerHeight - 100, duration: 2000, opacity: 0}}">
        这个方块在飞行过程中从透明变为不透明。
    </div>
{/if}

opacity: 0 表示方块起始透明度为 0，在飞行过程中逐渐变为 1（默认最终透明度）。

fly 的实现原理

fly 过渡效果的实现依赖于 CSS 的 transform 属性以及 opacity 属性。在过渡过程中，通过改变 transform 的 translateX、translateY 属性来实现元素的移动，同时结合 scale 属性实现缩放，opacity 属性实现透明度变化。Svelte 利用 CSS 的过渡（transition）属性来控制这些属性的变化过程。

例如，对于一个从左上角飞到右下角并伴有缩放和透明度变化的元素，Svelte 可能会生成如下 CSS 样式：

.my-fly-enter {
    transform: translateX(0) translateY(0) scale(0.5);
    opacity: 0;
    transition: transform 2000ms easeOut, opacity 2000ms easeOut;
}

.my-fly-enter-active {
    transform: translateX({window.innerWidth - 100}) translateY({window.innerHeight - 100}) scale(1);
    opacity: 1;
}

这里的 my - fly - enter 表示飞行起始状态，my - fly - enter - active 表示飞行过程中的活动状态。2000ms 对应设置的 duration，easeOut 对应 easing。Svelte 根据元素的显示状态，自动添加或移除这些类名，从而实现 fly 过渡效果。

Svelte 内置过渡效果之 slide

slide 过渡效果在 Svelte 中主要用于实现元素的滑动效果，元素可以从一个方向滑入或滑出屏幕，这种效果常用于菜单展开与收起、卡片切换等场景。

slide 的基本使用

我们通过一个简单的菜单示例来展示 slide 的基本用法。假设有一个按钮，点击按钮展开或收起一个菜单。代码如下：

<script>
    let menuVisible = false;
</script>

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

{#if menuVisible}
    <ul transition:slide>
        <li>菜单项 1</li>
        <li>菜单项 2</li>
        <li>菜单项 3</li>
    </ul>
{/if}

在上述代码中，通过 transition:slide 为 ul 元素添加了滑动过渡效果。当按钮被点击，menuVisible 状态改变时，菜单会以滑动的方式展开或收起。

slide 的参数配置

slide 过渡效果也支持多个参数来定制其行为。

direction：用于指定滑动的方向，可选值有 left、right、top、bottom。默认值为 left。例如，我们让菜单从底部滑入：

<script>
    let menuVisible = false;
</script>

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

{#if menuVisible}
    <ul transition:slide="{{direction: 'bottom'}}">
        <li>菜单项 1</li>
        <li>菜单项 2</li>
        <li>菜单项 3</li>
    </ul>
{/if}

在这个例子中，direction: 'bottom' 使得菜单在展开时从底部滑入，收起时向底部滑出。

duration：与前面过渡效果中的 duration 含义相同，用于指定过渡效果的持续时间。比如，我们将菜单滑动的时间设置为 1500 毫秒（1.5 秒）：

<script>
    let menuVisible = false;
</script>

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

{#if menuVisible}
    <ul transition:slide="{{direction: 'bottom', duration: 1500}}">
        <li>菜单项 1</li>
        <li>菜单项 2</li>
        <li>菜单项 3</li>
    </ul>
{/if}

这里，duration: 1500 使得菜单的滑入和滑出过程都持续 1.5 秒。

delay：用于设置过渡效果开始前的延迟时间。例如，延迟 500 毫秒（0.5 秒）后菜单开始滑动：

<script>
    let menuVisible = false;
</script>

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

{#if menuVisible}
    <ul transition:slide="{{direction: 'bottom', delay: 500, duration: 1500}}">
        <li>菜单项 1</li>
        <li>菜单项 2</li>
        <li>菜单项 3</li>
    </ul>
{/if}

delay: 500 使得菜单在按钮点击 0.5 秒后才开始其滑动过渡。

easing：同样用于指定缓动函数。比如，使用 linear 缓动函数，让菜单以匀速滑动：

<script>
    import {linear} from'svelte/easing';
    let menuVisible = false;
</script>

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

{#if menuVisible}
    <ul transition:slide="{{direction: 'bottom', duration: 1500, easing: linear}}">
        <li>菜单项 1</li>
        <li>菜单项 2</li>
        <li>菜单项 3</li>
    </ul>
{/if}

我们从 svelte/easing 导入 linear 并应用到 slide 过渡效果中。

slide 的实现原理

slide 过渡效果本质上是通过改变元素的 transform 属性中的 translateX 或 translateY 值来实现的，具体取决于 direction 参数。当 direction 为 left 或 right 时，改变 translateX；当 direction 为 top 或 bottom 时，改变 translateY。Svelte 利用 CSS 的过渡（transition）属性来控制这个变化过程。

例如，对于一个从底部滑入的菜单，Svelte 可能会生成如下 CSS 样式：

.my-slide-enter {
    transform: translateY(100%);
    transition: transform 1500ms linear;
}

.my-slide-enter-active {
    transform: translateY(0);
}

这里的 my - slide - enter 表示滑动起始状态，my - slide - enter - active 表示滑动过程中的活动状态。1500ms 对应设置的 duration，linear 对应 easing。当菜单收起时，样式会反过来，从 translateY(0) 变为 translateY(100%)，从而实现滑出效果。Svelte 根据元素的显示状态，自动添加或移除这些类名，完成 slide 过渡效果。