logoAnt Design X

设计研发组件X MarkdownX SDK演示
  • 介绍
  • 代码示例
  • 主题
  • 流式处理
    • 语法处理
    • 动画效果
  • 组件
    • 总览
    • Sources来源应用
    • Think思考过程
    • DataChart数据图表
    • Custom自定义组件
  • 插件集
    • 总览
    • Latex公式
    • HighlightCode代码高亮
    • Mermaid图表
    • CustomPlugins自定义插件
    • 主题和国际化

动画效果

为流式渲染的内容添加优雅的动画效果,支持文本的渐进式显示,提升用户阅读体验。

代码演示

API

streaming

参数说明类型默认值
hasNextChunk是否还有后续数据booleanfalse
enableAnimation启用文本淡入动画booleanfalse
animationConfig文本动画配置AnimationConfig{ fadeDuration: 200, easing: 'ease-in-out' }

AnimationConfig

属性说明类型默认值
fadeDuration淡入动画持续时间(毫秒)number200
easing动画缓动函数string'ease-in-out'

FAQ

动画效果不生效?

A: 请检查以下条件:

  • enableAnimation 是否设置为 true
  • hasNextChunk 是否正确控制
  • 浏览器是否支持 CSS3 动画

动画导致性能问题?

A: 建议优化:

  • 减少 fadeDuration 时间
  • 使用 linear 缓动函数
  • 分批渲染大量内容
Animation
流式动画效果
CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code