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.
209 lines
4.9 KiB
Markdown
209 lines
4.9 KiB
Markdown
# 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
|
||
|
||
```css
|
||
@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
|
||
|
||
```css
|
||
/* 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
|
||
|
||
```css
|
||
/* MathBlockNode */
|
||
@keyframes math-spin {
|
||
to { transform: rotate(360deg) }
|
||
}
|
||
/* 0.8s linear infinite */
|
||
|
||
/* TableNode */
|
||
/* Tailwind animate-spin */
|
||
|
||
/* ImageNode */
|
||
/* Tailwind animate-spin */
|
||
```
|
||
|
||
### 2.4 链接脉冲下划线
|
||
|
||
**组件**：LinkNode
|
||
|
||
```css
|
||
@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`:
|
||
|
||
```css
|
||
@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 位移（弹性过冲） |
|