★ FEATURED ARTICLE 人工智能AI AgentMCP 服务工具调用GUI 自动化语音数字人交互助手【免费下载链接】airi 自托管、归你拥有的 Grok 风格 AI 伴侣与 waifu / 赛博生命灵魂容器目标是接近 Neuro-sama 的高度支持实时语音聊天、Minecraft 和 Factorio 游玩支持 Web / macOS / Windows。项目地址https://gitcode.com/moeru-ai/airi点击查看免费下载本篇技术指南以 AIRI 项目 2025 年 3 月 6 日的 DevLog 为线索完整还原「proj-airi/ui-transitions」舞台转场组件库的诞生过程如何把 yui540 的 CSS 动画移植为通用 Vue 组件、如何用definePage/路由元信息驱动转场、如何通过StageTransitionGroup生命周期编排把转场集成进生产站点apps/stage-web。读者可以从中获得一套「动画组件化 路由联动 多端适配」的完整实战方案以及该组件库的源码级使用与扩展指南。背景为什么要把 CSS 动画改造成 Vue 组件2025 年 3 月 5 日的 DevStream 上AIRI 展示了基础动画与转场效果的制作进展次日的目标非常明确把 yui540 的出色动画作品移植并打磨成任何 Vue 项目都能直接使用的可复用组件。这一步的关键意义在于前一天的成果只是把 CSS 实现拆分进了 Vue 组件而真正意义上的可复用还远未完成——组件库需要具备可扩展、灵活的工作流与机制才能被其他页面、其他项目持续使用。AIRI 团队把 yui540 及参考库、参考作品的详细信息整理在了文档站点docs/content对应的设计指南参考资源页中原 DevLog 指向references/design-guidelines/resources/作为组件移植的设计依据。目前这一思路在仓库中的落地形态就是独立子包packages/ui-transitions/README.md一句概括——A set of UI transition animations for fade-in / fade-out of scenes一组用于场景淡入/淡出的 UI 转场动画包名为proj-airi/ui-transitions采用 MIT 协议。组件源码统一位于 packages/ui-transitions/src/components/由 src/index.ts 对外导出。组件库构成七种转场 一个编排器从 packages/ui-transitions/src/components/index.ts 可以确认组件库目前包含 8 个 Vue 组件7 个具体转场效果组件外加 1 个负责编排的StageTransitionGroup。对照 StageTransitionGroup.vue 中的转场注册表transitions对象各转场的注册名称、组件与默认时长如下注册名称组件默认时长效果特征slideSlideTransition2700ms双层遮罩水平滑入/滑出slope-slideSlopeSlideTransition2700ms斜切skew遮罩扫过arrowArrowTransition2700ms箭头形clip-path展开multiple-blocks-revealMultipleBlocksRevealTransition2800ms5 块栅格逐块揭示fantasy-fallFantasyFallTransition2700ms带圆角的幕布从四方向落下rectangles-rotateRectanglesRotateTransition2700ms3 块矩形旋转展开bubble-wave-outBubbleWaveOutTransition1000ms4 色同心圆波次扩散从源码可以观察到几种典型的动画实现路径双层遮罩 CSS 变量配色SlideTransitionSlideTransition.vue通过::before/::after两层遮罩配合slideIn/slideOut关键帧实现缓动曲线统一为cubic-bezier(0.87, 0.05, 0.02, 0.97)颜色不是硬编码而是在组件挂载时写入--stage-transition-1-overlay-color-1/2这样的 CSS 变量供业务侧动态注入。SlopeSlideTransition、MultipleBlocksRevealTransition、ArrowTransition采用同样的双层遮罩思路只是分别换用clip-path多边形、grid分块与渐次延迟。参数驱动的全方向幕布FantasyFallTransitionFantasyFallTransition.vue支持direction: up | down | left | right并通过borderRadiussm/md/lg配合media (min-width: 768px)与media (min-width: 1024px)做响应式圆角视觉上像是圆角幕布从指定方向盖下再摊平。多元素空间展开RectanglesRotateTransition用 3 个 100vmax 大小的矩形分别从左上、右下、中心做scale rotate展开支持rotation、staggerDelay等微调参数BubbleWaveOutTransition则用 4 个同心圆按 0.15s 间隔依次scale(0→1)扩散配色直接来自colors数组。这些组件都通过zIndexprop默认 100控制遮罩层级颜色缺失时各有兜底默认值如SlideTransition默认#666/#ccc保证任何环境都能独立运行。核心机制StageTransitionGroup 的转场生命周期编排组件库真正的骨架是 StageTransitionGroup.vue。它对外暴露的 props 构成了业务侧的完整定制面Prop类型作用primaryColorstring主遮罩色secondaryColorstring次遮罩色tertiaryColorstring第三遮罩色部分转场使用colorsstring[]多色转场如bubble-wave-out的颜色数组zIndexnumber遮罩层 z 轴层级disableTransitionsboolean全局禁用转场如系统设置关闭动画时usePageSpecificTransitionsboolean是否放行页面级自定转场配合pageSpecificAvailable元信息组件的编排逻辑可以概括为三个层次1. 生命周期状态机TransitionStage。源码中定义了完整的转场阶段枚举before-enter动画开始前enter-active进入动画进行中navigation导航切换时刻组件内部自行决定触发时机after-enter进入动画完成before-leave退出动画开始前leave-active退出动画进行中after-leave整个转场周期结束2. Hook 系统。通过addTransitionHook(hook)注册、triggerHooks(stage, data)异步触发所有 hook 按注册顺序串行等待完成单个 hook 抛错会被捕获而不中断流程并返回一个用于注销的移除函数。导航时机正是通过一个临时注册的navigationHook实现的一旦进入navigation阶段即调用next()放行路由。3. 路由守卫联动。组件在router.beforeEach中读取目标路由的to.meta.stageTransition若disableTransitions或 meta 不存在则直接next()若开启usePageSpecificTransitions且页面元信息标记了pageSpecificAvailable也直接放行否则将组件级 props颜色、zIndex 等合并覆盖进页面配置后调用triggerTransition(stageTransition, next)开始转场。导航时机默认取duration / 3可通过TransitionOptions.nextDelay覆盖即使 hook 链路异常也有一系列兜底setTimeout保证最终一定调用next()避免路由卡死。这套生命周期 hook 守卫的设计正是 DevLog 中所说可扩展且灵活的工作流与机制的最终形态业务方不必理解动画细节只需在路由元信息里声明转场名。路由驱动definePage 与路由元信息声明转场DevLog 中特别提到作者实验了unplugin-vue-router的definePage宏发现非常适合当前场景并决定沿此方向推进。这在组件库的 playground 中有直接证据packages/ui-transitions/playground/src/main.ts 使用createWebHashHistory()与vue-router/auto-routes自动生成路由packages/ui-transitions/vite.config.ts 注册了vue-router/vite插件root: playground扩展名支持.vue/.md并产出typed-router.d.ts类型提示每个演示页面用definePage声明自己的转场例如 playground/src/pages/index.vuescript setup langts import { definePage } from vue-router/experimental import Buttons from ../components/Buttons.vue definePage({ meta: { stageTransition: { name: slide, }, }, }) /scripttransition-2.vue至transition-7.vue依次对应slope-slide、arrow、multiple-blocks-reveal、fantasy-fall并声明direction: down、rectangles-rotate、bubble-wave-out正好构成组件库 7 种转场的完整演示矩阵playground/src/App.vue 用StageTransitionGroup包裹router-view并根据明暗主题切换传入primaryColor与secondaryColor亮色#FFA1B3/#A1FFD7暗色#FF5778/#57FFB7。生产侧apps/stage-web则采用了等效的route langyaml声明方式例如 apps/stage-web/src/pages/index.vueroute: meta: stageTransition: name: bubble-wave-out两种写法殊途同归最终都以to.meta.stageTransition形式进入StageTransitionGroup的守卫逻辑。生产落地stage-web 主舞台的集成实战DevLog 记载当天 DevStream 中把舞台转场动画组件集成到 AIRI 网站主舞台的过程并不顺利——作者在旧版动画组件设计中发现了几个 bug且均已修复新转场随后在官方部署上线。仓库中 apps/stage-web/src/App.vue 就是这份成果的完整现场StageTransitionGroup :primary-colorprimaryColor :secondary-colorsecondaryColor :tertiary-colortertiaryColor :colorscolors :z-index100 :disable-transitionssettings.disableTransitions.value :use-page-specific-transitionssettings.usePageSpecificTransitions.value RouterView v-slot{ Component, route } Transition :nameactiveRouteTransitionName modeout-in div :keyroute.path classh-full w-full !-- ErrorBoundary 页面组件 -- /div /Transition /RouterView /StageTransitionGroup这里的几个实践细节值得单独说明颜色与主题系统联动primaryColor/secondaryColor/tertiaryColor由useTheme()的isDark与主题色相--chromatic-hue实时计算核心是color-mix(in srgb, oklch(...), ...)混色表达式colors数组则在三色之外追加了明暗底色暗色#121212亮色#FFFFFF。因此转场遮罩色会随用户主题、甚至动态色相动画hue-anim10s 循环自动变化。双转场通道StageTransitionGroup负责舞台级遮罩转场同时 App 还维护了一个activeRouteTransitionName依据to.meta.transition与from.meta.transitionBack计算驱动 Vue 原生Transition name...做页面内容层的淡入淡出两层动画叠加出完整的舞台换场观感。用户可关闭disableTransitions与usePageSpecificTransitions都直接绑定设置 storesettings.disableTransitions、settings.usePageSpecificTransitions即用户可在设置页关闭动画或改用页面自定转场——这也呼应了 DevLog 中模块配置 UI 与设置页面全部实现上线的记录。页面侧通过routeYAML 元信息声明自己的转场例如首页使用bubble-wave-outapps/stage-web/src/pages/index.vue系统设置页使用slideapps/stage-web/src/pages/settings/system/index.vue并额外标记pageSpecificAvailable: true开发者页使用slideapps/stage-web/src/pages/settings/system/developer.vue。DevLog 末尾还记录了一个真实的教训下播后用手机实测时桌面端与平板端表现正常但移动端动画被意外破坏计划次日白天修复。这说明转场组件在实机多端验证尤其是视口单位vmax、固定定位遮罩在移动浏览器上的表现是不可省略的一环也是将此组件库用于自己项目时应当预先测试的适配点。Playground 与 Netlify 部署约定组件库的演示工程位于 packages/ui-transitions/playground/脚本定义在 packages/ui-transitions/package.jsonpnpm -F proj-airi/ui-transitions run play:dev本地开发pnpm -F proj-airi/ui-transitions run play:build构建 playgroundpnpm -F proj-airi/ui-transitions run play:preview预览构建产物DevLog 还宣布了一条仓库约定今后每个包的 playground 在 Netlify 部署时统一采用proj-airi${subDirectory}${packageName}的命名模式本例即proj-airi-packages-ui-transitions。对应配置见 packages/ui-transitions/netlify.toml[build] base / command pnpm -F proj-airi/ui-transitions run build pnpm -F proj-airi/ui-transitions run play:build publish /packages/ui-transitions/playground/dist [build.environment] NODE_VERSION 24 NODE_OPTIONS --max-old-space-size4096 [[redirects]] from /* to /index.html status 200 force false即构建时先用pnpm -F过滤到本包执行构建再构建 playground 并把产物发布到子包内的playground/dist最后用 SPA 兜底重定向让所有前端路由都回落到index.html。当天调研路由方向、文档站点与模型能力除了转场组件本身DevLog 还记录了当天几项与技术选型相关的调研可作为项目发展脉络的参考路由方案定型实验unplugin-vue-router的definePage宏后确定此方向即上文 Playground 中所见的自动路由 definePage组合此后 Playground 与生产页面均围绕路由元信息驱动转场。文档站点 /docs 重定向官方文档站上线于airi.build后社区成员建议改用airi.more.ai/docs形态作者一度在为 /docs 建立 200 重定向代理上受阻与 CI/CD 管道反复搏斗、提交了约十个实验 commit 仍未成功但最终找到了可行方案并预告在后续 DevLog 中详解本仓库docs/content即文档站内容源。模型与推理网关调研当天还调研了 DeepSeek 团队发布的若干技术与其开源仓库、ByteDance 的 LLM 网关 AIBrix以及微软新发布的 Phi-4-mini 是否适合移植给 AIRI 使用——好消息是 Phi-4-mini 原生具备函数调用function calling能力这意味着可以基于其预训练支持来构建 Agent这与 AIRI 的推理链路方向一致。小结一套可复制的动画组件化路径回顾这一天的工作可以提炼出一条清晰可复制的工程路径把优质 CSS 动画沉淀为参数化组件以yui540作品为起点将动画实现封装进proj-airi/ui-transitions颜色、方向、时长、圆角、层级全部参数化并通过 CSS 变量注入任何 Vue 项目都能独立使用用编排器统一生命周期StageTransitionGroup以TransitionStage状态机 hook 系统 路由守卫接管何时播、何时导航、何时结束业务侧只需在路由元信息definePage或route langyaml中写一行stageTransition.name在真实站点中验证并收口apps/stage-web的集成展示了颜色随主题联动、双层转场叠加、用户可关闭等生产级细节而移动端动画 bug 则提醒我们——动画组件的跨端实测永远要排在看起来很好前面。如果你正在为自己的 Vue 项目设计舞台式换场动画packages/ui-transitions的组件实现SlideTransition.vue、ArrowTransition.vue、MultipleBlocksRevealTransition.vue 等与StageTransitionGroup的生命周期设计都是可以直接对照参考的现成范本。赞分享人工智能AI AgentMCP 服务工具调用GUI 自动化语音数字人交互助手【免费下载链接】airi 自托管、归你拥有的 Grok 风格 AI 伴侣与 waifu / 赛博生命灵魂容器目标是接近 Neuro-sama 的高度支持实时语音聊天、Minecraft 和 Factorio 游玩支持 Web / macOS / Windows。项目地址https://gitcode.com/moeru-ai/airi点击查看免费下载相关推荐AIRI 舞台过渡动画组件化实践从 yui540 CSS 移植到 Vue 可复用组件AIRI 舞台过渡动画组件化实践从 yui540 CSS 移植到 Vue 可复用组件 本文基于 Project AIRI 开发日志2025.03.06记录人工智能AI AgentMCP 服务工具调用GUI 自动化语音数字人交互助手后端AIRI 开发日志解析把 yui540 的 CSS 动画移植成可复用的 Vue 舞台转场组件库AIRI 开发日志解析把 yui540 的 CSS 动画移植成可复用的 Vue 舞台转场组件库 本篇技术文章以 AIRI 项目 2025 03 06 的开发日人工智能AI 应用大模型AI Agent交互助手语音数字人后端前端桌面应用移动开发GUI 自动化MCP 服务Airi 舞台过渡动画系统开发实录从 yui540 作品移植到可复用的 Vue 转场组件Airi 舞台过渡动画系统开发实录从 yui540 作品移植到可复用的 Vue 转场组件 本文依据项目开发日志 docs/content/ja/blog/D人工智能AI AgentMCP 服务工具调用GUI 自动化语音数字人交互助手后端上一篇Livebook终极指南如何用Elixir交互式笔记本自动化代码与数据工作流下一篇Lanyon部署实战GitHub Pages与自定义域名的完美结合创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
