内置过渡 — transition:

最常用的五种过渡,切换查看它们进入与离开时的效果差异。

fade

淡入淡出

duration: 400
切到其他元素,再点「移入」可对比不同过渡

自定义缓动 — svelte/easing

用 easing 参数控制动画节奏。点击「重放」观察不同缓动曲线的差异。

cubicOut
缓动函数就是个 (t) => t 的映射

列表动画 — animate:flip

FLIP 技术自动计算元素前后位置差并补间。必须用 keyed each 才能生效。

  • 第一项
  • 第二项
  • 第三项
  • 第四项
  • 第五项

路径绘制 — transition:draw

draw 通过控制 stroke-dashoffset 实现线条逐步绘制,非常适合图标与插画。

基于 Svelte 5 与 SvelteKit 构建 · 全部示例均可在浏览器中实时交互