本文档解释了 Svelte 的过渡和动画系统，它们提供了声明式的方法来在元素进入和离开 DOM 或在 DOM 中移动时对其进行动画处理。这些系统与 Svelte 的运动工具（tweened 和 spring）不同，后者直接对值进行动画处理，而不是对 DOM 元素，尽管它们共享底层的实现细节。
Svelte 提供了几种与动画相关的特性
tweened 和 spring 存储，用于随着时间推移对值进行动画处理来源
Svelte 中的过渡系统提供了一种在元素添加到 DOM 和从 DOM 中移除时为其添加动画的方法。过渡是返回一个对象的函数，该对象具有 delay、duration、easing 等属性，以及 css 或 tick 函数，这些函数定义了如何应用过渡。
来源
过渡函数（transition）
创建过渡管理器并将其附加到当前效果的核心函数。它接受几个参数
flags：确定过渡是进入、退出还是两者兼有，以及是否为全局element：要过渡的 DOM 元素get_fn：返回过渡函数的函数get_params：返回过渡参数的函数过渡管理器
过渡管理器负责过渡的生命周期，有两个主要方法
in()：处理元素添加到 DOM 时的进入过渡out(fn)：处理元素从 DOM 中移除时的退出过渡动画函数（animate）
使用 Web Animations API 执行动画的函数。它负责
来源
Svelte 提供了几种内置的过渡函数
| 过渡 | 描述 | 关键参数 |
|---|---|---|
fade | 简单的透明度过渡 | delay、duration、easing |
blur | 将透明度与模糊滤镜结合 | delay、duration、easing、amount、opacity |
fly | 动画位置和透明度 | delay、duration、easing、x、y、opacity |
slide | 折叠或展开元素 | delay、duration、easing、axis |
scale | 动画缩放和透明度 | delay、duration、easing、start、opacity |
draw | 动画 SVG 路径 | delay、duration/speed、easing |
crossfade | 为在上下文之间移动的元素创建配对过渡 | delay、duration、easing、fallback |
来源
Svelte 在过渡期间会调度自定义事件
introstart：在进入过渡开始时触发introend：在进入过渡完成时触发outrostart：在退出过渡开始时触发outroend：在退出过渡完成时触发这些事件可用于与其他操作协调过渡。
来源
Svelte 支持两种类型的过渡
本地过渡：仅在直接父级效果触发更改时运行。这是默认行为。
全局过渡：无论由哪个效果引起更改，都会运行。通过使用 global 修饰符来激活。
来源
动画系统用于为元素在 DOM 中移动时（特别是在键控的 each 块中）添加动画。
来源
该 animation 函数创建一个动画管理器并将其附加到当前 each 块。动画管理器具有以下方法：
measure()：记录元素的初始位置apply()：比较初始位置和最终位置，如果不同则进行动画处理fix()：在移动期间应用临时样式以固定元素的位置unfix()：在动画结束后移除临时样式动画函数通常与键控的 each 块一起使用，以便在元素因以下原因改变位置时为其添加动画：
来源
Svelte 提供了两种运动工具：tweened 和 spring。这些是随着时间推移对值进行动画处理的存储，而不是直接对 DOM 元素进行动画处理。
来源
The tweened store smoothly transitions between values over time. It uses an interpolator to determine intermediate values and an easing function to control the pace of the transition.
Key options
delay: Time in ms before the transition startsduration: Duration of the transition in mseasing: Function that controls the transition's paceinterpolate: Custom function to interpolate between valuesSvelte 5.8 introduced a modern Tween class for the same functionality, which should be preferred.
来源
The spring store transitions between values using spring physics, simulating the behavior of a spring with customizable parameters
stiffness: Controls how "stiff" the spring is (0-1)damping: Controls how quickly the spring stops oscillating (0-1)precision: Determines when the spring is considered "settled"Svelte 5.8 introduced a modern Spring class for the same functionality, which should be preferred.
来源
Transitions and animations integrate closely with Svelte's component lifecycle and reactivity system.
来源
Performance: Transitions using the css property are generally more performant than those using tick because CSS animations can be offloaded to the GPU.
Transition Coordination: Use the crossfade transition for elements that move between different contexts.
Reversible Transitions: Svelte's transition system handles reversals elegantly. If an element is transitioning out and then transitions back in before completion, the transition will reverse smoothly.
Modern APIs: The new Tween and Spring classes (introduced in 5.8) provide a more modern API for motion utilities compared to the legacy function-based stores.
Safari Compatibility: The transition system includes workarounds for Safari bugs related to overflow: hidden (see transitions.js:402-417).
来源
| 功能 | 用例 | 示例实现 |
|---|---|---|
| Fade transition | Element appearing/disappearing | <div transition:fade={{ duration: 300 }}>...</div> |
| Fly transition | Elements flying in/out of view | <div transition:fly={{ y: 200, duration: 500 }}>...</div> |
| 动画 | Items reordering in a list | {#each items as item (item.id)} <div use:animation={() => someAnimation}>...</div> {/each} |
| Tweened store | Smooth counter animation | const count = tweened(0, { duration: 500 }) |
| Spring Store | Physics-based animation | const position = spring(0, { stiffness: 0.3, damping: 0.8 }) |