过渡动画
Svelte 内置了过渡与动画指令,无需引入动画库。它们都遵循
prefers-reduced-motion,用户关闭动效时会自动跳过。transition:in: / out:svelte/easinganimate:flipdraw
内置过渡 — transition:
最常用的五种过渡,切换查看它们进入与离开时的效果差异。
fade
淡入淡出
duration: 400 切到其他元素,再点「移入」可对比不同过渡
自定义缓动 — svelte/easing
用 easing 参数控制动画节奏。点击「重放」观察不同缓动曲线的差异。
cubicOut 缓动函数就是个 (t) => t 的映射
列表动画 — animate:flip
FLIP 技术自动计算元素前后位置差并补间。必须用 keyed each 才能生效。
- 第一项
- 第二项
- 第三项
- 第四项
- 第五项
路径绘制 — transition:draw
draw 通过控制 stroke-dashoffset 实现线条逐步绘制,非常适合图标与插画。