BoosAPI/desktop/libs/markstream-vue/design/animations.md

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 位移（弹性过冲）