boos
e0a5f57793
Vendor the rebranded BoosAPI Desktop client (Tauri + Vue) into metapi as a monorepo subdirectory under desktop/. Source only — node_modules, dist, Cargo target and the upstream .git history are excluded. desktop/ keeps its own independent Cargo workspace (desktop/src-tauri with crates/*); it is not part of the backend boosapi crate, so a `cargo check` at the metapi root still compiles only the backend. Build the desktop app from desktop/src-tauri per desktop/README.md. Note: app icons are still placeholder assets pending the final BoosAPI logo. The updater signing keys live outside the repo and are not included.
4.9 KiB
4.9 KiB
Animations & Transitions
所有动画、过渡效果与运动设计清单。
1. CSS 变量控制的动画
| 变量 | 默认值 | 用途 |
|---|---|---|
--typewriter-fade-duration |
900ms |
流式打字机淡入时长 |
--typewriter-fade-ease |
ease-out |
流式打字机缓动 |
--stream-update-fade-duration |
同上回退 | 流式内容更新淡入时长 |
--stream-update-fade-ease |
同上回退 | 流式内容更新缓动 |
2. Keyframe 动画
2.1 流式内容淡入
组件：InlineCodeNode
@keyframes inline-code-stream-update-fade-a { from { opacity: 0 } to { opacity: 1 } }
@keyframes inline-code-stream-update-fade-b { from { opacity: 0 } to { opacity: 1 } }
- 使用 a/b 交替触发避免重复动画不生效
- Duration：
var(--stream-update-fade-duration, var(--typewriter-fade-duration, 900ms)) - Easing：
var(--stream-update-fade-ease, var(--typewriter-fade-ease, ease-out)) will-change: opacity
2.2 骨架屏 Shimmer
组件：CodeBlockNode, TableNode
/* CodeBlockNode */
@keyframes code-skeleton-shimmer {
0% { background-position: -200% 0 }
100% { background-position: 200% 0 }
}
/* background: linear-gradient(90deg, rgba(0,0,0,0.04) 25%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.04) 75%) */
/* TableNode */
@keyframes table-node-shimmer {
0% { background-position: -200% 0 }
100% { background-position: 200% 0 }
}
2.3 Spinner 旋转
组件：MathBlockNode, TableNode, ImageNode
/* MathBlockNode */
@keyframes math-spin {
to { transform: rotate(360deg) }
}
/* 0.8s linear infinite */
/* TableNode */
/* Tailwind animate-spin */
/* ImageNode */
/* Tailwind animate-spin */
2.4 链接脉冲下划线
组件：LinkNode
@keyframes underlinePulse {
0%, 100% { opacity: var(--underline-rest-opacity, 0.18) }
50% { opacity: var(--underline-opacity, 0.35) }
}
/* Duration: var(--underline-duration, 1.6s) */
/* Timing: var(--underline-timing, ease-in-out) */
/* Iteration: var(--underline-iteration, infinite) */
3. CSS Transitions
3.1 通用过渡模式
| 组件 | 属性 | 时长 | 缓动 |
|---|---|---|---|
| CodeBlockNode | height, max-height |
180ms |
ease |
| MathBlockNode 渲染中 | opacity |
200ms |
ease |
| MermaidBlockNode 容器 | height |
150ms |
ease-out |
| Tooltip 位移 | transform, box-shadow |
220ms |
cubic-bezier(.16,1,.3,1) |
3.2 Vue Transition 组件
ImageNode — 图片切换
名称：img-switch
enter: opacity 220ms ease + translateY(6px → 0)
leave: opacity 220ms ease + translateY(0 → 6px)
MathBlockNode — 公式切换
名称：math-fade
enter: opacity 0.3s ease (0 → 1)
leave: opacity 0.3s ease (1 → 0)
TableNode — 表格淡入
名称：table-node-fade
enter: opacity 0.18s ease
leave: opacity 0.18s ease
Tooltip — 浮层出入
名称：tooltip
enter-from: opacity: 0, translateY(-6px) scale(0.98)
enter-to: opacity: 1, translateY(0) scale(1)
enter-active: opacity 120ms linear
leave-active: opacity 120ms linear
MermaidBlockNode — 弹窗
名称：mermaid-dialog
enter: opacity 200ms ease + scale(0.98 → 1.0)
leave: opacity 200ms ease + scale(1.0 → 0.98)
4. 交互反馈
4.1 按钮点击缩放
| 组件 | 选择器 | 效果 |
|---|---|---|
| CodeBlockNode | .code-action-btn:active |
transform: scale(0.98) |
| MermaidBlockNode | .mermaid-action-btn:active |
transform: scale(0.98) |
| AdmonitionNode | .admonition-toggle |
focus: outline 2px solid rgba(0,0,0,0.08) |
4.2 禁用状态
| 组件 | 效果 |
|---|---|
| MermaidBlockNode 按钮 | opacity: 0.5, cursor: not-allowed |
5. 性能优化
5.1 will-change 使用
| 组件 | 元素 | will-change 值 |
|---|---|---|
| InlineCodeNode | .inline-code-stream-delta |
opacity |
| LinkNode | .link-loading-indicator |
opacity |
5.2 减少动效偏好
支持 prefers-reduced-motion:
@media (prefers-reduced-motion: reduce) {
.inline-code-stream-delta { animation: none !important }
}
组件：InlineCodeNode, LinkNode
6. 动画时长速查表
| 速度等级 | 时长 | 用途 |
|---|---|---|
| 极快 | 120ms |
Tooltip 出入 |
| 快速 | 150ms |
Mermaid 容器高度 |
| 快速 | 180ms |
代码块高度、表格淡入 |
| 标准 | 200ms |
Mermaid 弹窗、数学公式渲染 |
| 标准 | 220ms |
图片切换、Tooltip 位移 |
| 慢速 | 300ms |
数学公式切换 |
| 流式 | 900ms |
打字机/流式更新淡入 |
| 脉冲 | 1600ms |
链接加载指示器 |
7. 缓动函数速查
| 缓动 | 用途 |
|---|---|
ease |
代码块高度、数学公式、图片 |
ease-out |
Mermaid 容器、打字机淡入 |
ease-in-out |
链接脉冲 |
linear |
Spinner 旋转、Tooltip 透明度 |
cubic-bezier(.16,1,.3,1) |
Tooltip 位移（弹性过冲） |