流式动画

AI 流式输出的逐词入场动画 —— 每个词单独淡入，适合搭配 SSE 流式聊天。

在线演示

用法

通过 enable-animate 开启：

vue

<MarkdownRenderer :markdown="streamingText" enable-animate />

配合流式输出：把 AI 增量返回的文本累积到 streamingText，每次更新都会触发新内容逐词动画。

原理

用 Intl.Segmenter 做中英文智能分词（中文按词切分）
段落 / 标题 / 列表项 / 强调内的文本节点被拆成 <span class="x-md-animated-word">
CSS fadeIn 动画逐个淡入

css

.x-md-animated-word {
  animation: fadeIn 0.3s ease-in-out;
}

相关 Props

Prop	类型	默认值	说明
`enableAnimate`	`boolean`	`false`	启用流式逐字动画