AIRI 开发日志解析把 yui540 的 CSS 动画移植成可复用的 Vue 舞台转场组件库【免费下载链接】airi Self hosted, you-owned Grok Companion, a container of souls of waifu, cyber livings to bring them into our worlds, wishing to achieve Neuro-samas altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airi本篇技术文章以 AIRI 项目 2025-03-06 的开发日志DevLog-2025.03.06为主线深度解析 AIRI 团队如何把日本前端作者 yui540 的 CSS 动画作品移植为开箱即用的 Vue 转场组件并结合仓库中packages/ui-transitions的真实源码拆解其生命周期 Hook 机制、definePage路由配置方案、Netlify Playground 部署模式以及当日对 DeepSeek 开源基础设施、AIBrix LLM 网关与 Phi-4-mini 小模型的调研结论。读完本文你将掌握一个「动画组件 → 路由集成 → 页面落地」的完整技术闭环可直接复用到自己的 Vue 项目中。一、开发日志背景从 CSS 动画到可复用 Vue 组件2025-03-06 的开发日志记录了一个明确的工程目标把 yui540 创作的基础动画与转场fundamental animations and transitions移植并适配成一个可复用的 Vue 组件让任意 Vue 项目都能直接使用。前一天作者还在 DevStream 直播中演示了这一进展当日日志则聚焦于把成果沉淀成真正可复用、可扩展的机制。该移植成果对应的正是仓库中的packages/ui-transitions其定位在 README 中写得很直白A set of UI transition animations for fade-in / fade-out of scenes.即一组用于场景淡入 / 淡出的 UI 转场动画集合。这个包并不是对 yui540 原作的简单复制而是面向换页 / 换场景这类 Vue 应用高频需求做了工程化封装——这也是当日日志中反复强调的前一日的目标是把 CSS 拆进 Vue 组件但真正可复用的部分还没完成还需要设计一套可扩展、灵活的机制给其他页面使用。二、组件清单七种转场动画的包内结构packages/ui-transitions包的组件层位于 src/components共导出 7 个转场组件组件名转场名称路由 meta 中使用的 key注册时长 durationSlideTransitionslide2700msSlopeSlideTransitionslope-slide2700msArrowTransitionarrow2700msMultipleBlocksRevealTransitionmultiple-blocks-reveal2800msFantasyFallTransitionfantasy-fall2700msRectanglesRotateTransitionrectangles-rotate2700msBubbleWaveOutTransitionbubble-wave-out1000ms日志中提到当日又从 cowardly-witch 移植了 3 个额外的转场对应MultipleBlocksRevealTransition、FantasyFallTransition、RectanglesRotateTransition等新增成员它们已经全部上线到 Netlify Playground 演示页。在源码层面每个转场组件都保留了对原作者工作的高透明度致敬。例如 ArrowTransition.vue 的样式区直接以注释标注了灵感来源与原始代码出处/** * Author: yui540 * Source code at: https://github.com/yui540/css-animations/blob/.../transitions/index.html#L160-L233 */其实现方式是纯 CSS 动画::before/::after两个全屏伪元素配合clip-path多边形路径的arrowIn/arrowOut关键帧实现箭头形状的遮罩开合--delay与--sharpness默认 40%两个 CSS 变量控制时序与箭头锐度。值得注意的移植细节是原作者用 CSS 变量写死的颜色在这里被提升为组件 Props 驱动的主题系统。三、核心机制StageTransitionGroup 的生命周期 Hook 与导航编排真正体现可复用机制设计的是 StageTransitionGroup.vue180 行核心逻辑它把转场动画抽象成一条与路由导航深度绑定的生命周期管线从源码结构看这套设计包含四个层次3.1 七阶段生命周期事件组件定义了一套完整的转场生命周期见 L51-L58每个阶段都是一个可挂载 Hook 的事件点阶段语义before-enter动画开始前enter-active入场动画已开始navigation到达导航时机由组件自行决定何时调用next()after-enter入场动画完成before-leave退场动画开始前leave-active退场动画已开始after-leave完整动画周期结束3.2 转场注册表transitions registry组件内部用shallowRef维护了一张名称 → 配置的映射表见 L71-L100每条配置包含component实际的转场 Vue 组件duration转场总时长毫秒exitDuration可选的退场时长nextDelay可选的导航触发延迟导航时机的默认逻辑为nextDelay ?? duration / 3即默认在转场进行到约 1/3 处发起路由跳转保证新页面在遮罩打开的过程中就开始加载的流畅观感。3.3 Hook 系统与编排流程组件提供addTransitionHook(hook)APIL106-L116调用方注册 Hook 后会拿到一个移除函数用于解绑triggerHooksL119-L131会按注册顺序依次await执行所有 Hook并在单个 Hook 抛错时打印Error in transition hook at stage ...而不会中断整个流程。导航编排是这套系统的关键L133-L242名字为none或未注册的转场直接放行next()通过临时注册的navigationHook 响应navigation阶段用hasNavigated标志保证next()只调用一次若上一个转场仍在播放showTransition为真会先快进触发退场阶段、等待 50ms 再启动新转场提供了多重兜底navigation阶段超时未处理时强制导航finally中还会以duration * 2的保守超时再次兜底确保路由永远不会被卡死。3.4 与 vue-router 的自动集成组件在setup中直接注册了router.beforeEach全局前置守卫L251-L284逻辑清晰传入disableTransitions时直接放行方便测试与降级目标路由to.meta.stageTransition不是对象时放行usePageSpecificTransitions且页面声明了pageSpecificAvailable时放行页面级自定义转场优先否则用组件 Props 中的primaryColor/secondaryColor/tertiaryColor/colors/zIndex覆盖meta 中的对应字段再触发triggerTransition(stageTransition, next)。模板层则通过component :is...动态渲染当前激活的转场组件并透传stageTransition参数L287-L294。从源码结构看这套设计的目标是把主题色、层级、禁用开关全部收敛到StageTransitionGroup一个入口上页面侧只需声明我想用什么转场。四、definePage用路由 meta 声明页面转场日志提到当日实验了unplugin-vue-router提供的definePage宏并确认非常适合我的场景决定沿用这条路线。Playground 中的页面源码印证了这套用法例如 playground/src/pages/index.vueimport { definePage } from vue-router/experimental import Buttons from ../components/Buttons.vue definePage({ meta: { stageTransition: { name: slide, }, }, })也就是说每个页面只需要在definePage里声明stageTransition.name以及可选的颜色、方向等字段路由切换时转场就会被自动触发——页面代码零动画逻辑转场完全由StageTransitionGroup统一接管。这正是日志中设计一套可扩展、灵活的机制供其他页面使用的落地形态。Playground 中 transition-2.vue 到 transition-7.vue 共 6 个演示页 首页覆盖了全部 7 种转场效果的在线试玩。五、Playground 与 Netlify 部署约定日志宣布了一条团队约定从今往后每个包的 Playground 都以proj-airi${subDirectory}${packageName}模式命名 Netlify 部署。例如本次的转场组件库部署在Playground 演示页https://proj-airi-packages-ui-transitions.netlify.app/#/官方部署已集成进主站舞台https://airi.moeru.ai仓库中 packages/ui-transitions/netlify.toml 与 playground 目录即为该 Playground 的实际载体。这种一包一 Playground 统一命名空间的模式让每个 UI 包都拥有可独立预览、可被 CI/CD 自动发布的演示环境便于社区直接体验效果。当日日志还提到为/docs路径配置 200 重定向代理的折腾过程最终已解决细节留待后续 DevLog 记录反映了文档站点与主站多域名共存的部署权衡。六、落地与踩坑主站舞台集成与移动端修复日志的 DevStream 部分记录了把舞台转场组件集成进 AIRI 官网主舞台的真实过程并不顺利——作者在之前的动画组件设计中发现了几个 bug当日已修复并且直播结束后在手机上实测时发现桌面和平板正常但移动端动画被意外破坏计划次日修复。这条记录传达了两个工程经验转场动画的组件化不是终点集成到真实路由系统后才会暴露设计缺陷时序、position: fixed在移动端视口下的表现、软键盘 / 地址栏变化对视口高度的影响等必须多端回归验证全屏遮罩类动画在桌面、平板、手机上的渲染差异很大而 DevStream 的实时演示恰好提供了发现问题 → 当场修复 → 次日跟进的快速迭代节奏。七、当日模型与生态调研Phi-4-mini、DeepSeek 开源基础设施与 AIBrix日志后半部分记录了面向 AIRI 智能体能力的行业调研属于当日技术视野的延伸Microsoft Phi-4-mini日志确认该模型原生内置 function calling 能力这意味着终于可以基于预训练支持来构建 Agent 了不再需要为小模型额外做工具调用的对齐/微调DeepSeek 开源基础设施索引open-infra-index调研了 DeepSeek 团队此前一周发布的开源仓库集合为 AIRI 的推理与服务链路选型提供参考字节跳动开源的 LLM 网关 AIBrix作为 vLLM 生态下的 LLM 网关方案被纳入调研范围这类网关通常负责路由、限流、模型编排与 AIRI 的多模型接入诉求直接相关。需要说明的是日志只是记录了调研这一动作与初步结论Phi-4-mini 的 function calling 能力并未给出最终集成决策AIRI 的核心 Agent 能力由仓库中的packages/core-agent承载读者可以结合该包继续深入。八、总结从 DevLog 看可复用动画工程的四步方法论通读 2025-03-06 的 DevLog 并结合packages/ui-transitions源码可以提炼出一条清晰的工程路径选型与致敬选定 yui540 的高质量 CSS 动画作为美学基础保留原作者署名与来源注释组件化封装把 CSS 变量提升为组件 Props让颜色、层级、时长可被外部主题系统覆盖路由级编排通过StageTransitionGroup的七阶段生命周期 definePage元信息声明把页面级转场从页面代码中彻底解耦同时用多重兜底保证导航永不卡死持续迭代验证借助 Netlify Playground 与 DevStream 演示加速反馈并针对移动端等真实环境持续修复。如果你也在为自己的 Vue 项目设计转场系统这套「注册表驱动 生命周期 Hook 路由守卫集成」的架构是很好的参考范本——而 AIRI 的整个演进过程都记录在仓库 docs/content/en/blog 的每日 DevLog 序列中值得持续追踪。【免费下载链接】airi Self hosted, you-owned Grok Companion, a container of souls of waifu, cyber livings to bring them into our worlds, wishing to achieve Neuro-samas altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/10 2:09:58 · 阅读 1.2k AIRI 开发日志解析：把 yui540 的 CSS 动画移植成可复用的 Vue 舞台转场组件库
AIRI 开发日志解析把 yui540 的 CSS 动画移植成可复用的 Vue 舞台转场组件库【免费下载链接】airi Self hosted, you-owned Grok Companion, a container of souls of waifu, cyber livings to bring them into our worlds, wishing to achieve Neuro-samas altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airi本篇技术文章以 AIRI 项目 2025-03-06 的开发日志DevLog-2025.03.06为主线深度解析 AIRI 团队如何把日本前端作者 yui540 的 CSS 动画作品移植为开箱即用的 Vue 转场组件并结合仓库中packages/ui-transitions的真实源码拆解其生命周期 Hook 机制、definePage路由配置方案、Netlify Playground 部署模式以及当日对 DeepSeek 开源基础设施、AIBrix LLM 网关与 Phi-4-mini 小模型的调研结论。读完本文你将掌握一个「动画组件 → 路由集成 → 页面落地」的完整技术闭环可直接复用到自己的 Vue 项目中。一、开发日志背景从 CSS 动画到可复用 Vue 组件2025-03-06 的开发日志记录了一个明确的工程目标把 yui540 创作的基础动画与转场fundamental animations and transitions移植并适配成一个可复用的 Vue 组件让任意 Vue 项目都能直接使用。前一天作者还在 DevStream 直播中演示了这一进展当日日志则聚焦于把成果沉淀成真正可复用、可扩展的机制。该移植成果对应的正是仓库中的packages/ui-transitions其定位在 README 中写得很直白A set of UI transition animations for fade-in / fade-out of scenes.即一组用于场景淡入 / 淡出的 UI 转场动画集合。这个包并不是对 yui540 原作的简单复制而是面向换页 / 换场景这类 Vue 应用高频需求做了工程化封装——这也是当日日志中反复强调的前一日的目标是把 CSS 拆进 Vue 组件但真正可复用的部分还没完成还需要设计一套可扩展、灵活的机制给其他页面使用。二、组件清单七种转场动画的包内结构packages/ui-transitions包的组件层位于 src/components共导出 7 个转场组件组件名转场名称路由 meta 中使用的 key注册时长 durationSlideTransitionslide2700msSlopeSlideTransitionslope-slide2700msArrowTransitionarrow2700msMultipleBlocksRevealTransitionmultiple-blocks-reveal2800msFantasyFallTransitionfantasy-fall2700msRectanglesRotateTransitionrectangles-rotate2700msBubbleWaveOutTransitionbubble-wave-out1000ms日志中提到当日又从 cowardly-witch 移植了 3 个额外的转场对应MultipleBlocksRevealTransition、FantasyFallTransition、RectanglesRotateTransition等新增成员它们已经全部上线到 Netlify Playground 演示页。在源码层面每个转场组件都保留了对原作者工作的高透明度致敬。例如 ArrowTransition.vue 的样式区直接以注释标注了灵感来源与原始代码出处/** * Author: yui540 * Source code at: https://github.com/yui540/css-animations/blob/.../transitions/index.html#L160-L233 */其实现方式是纯 CSS 动画::before/::after两个全屏伪元素配合clip-path多边形路径的arrowIn/arrowOut关键帧实现箭头形状的遮罩开合--delay与--sharpness默认 40%两个 CSS 变量控制时序与箭头锐度。值得注意的移植细节是原作者用 CSS 变量写死的颜色在这里被提升为组件 Props 驱动的主题系统。三、核心机制StageTransitionGroup 的生命周期 Hook 与导航编排真正体现可复用机制设计的是 StageTransitionGroup.vue180 行核心逻辑它把转场动画抽象成一条与路由导航深度绑定的生命周期管线从源码结构看这套设计包含四个层次3.1 七阶段生命周期事件组件定义了一套完整的转场生命周期见 L51-L58每个阶段都是一个可挂载 Hook 的事件点阶段语义before-enter动画开始前enter-active入场动画已开始navigation到达导航时机由组件自行决定何时调用next()after-enter入场动画完成before-leave退场动画开始前leave-active退场动画已开始after-leave完整动画周期结束3.2 转场注册表transitions registry组件内部用shallowRef维护了一张名称 → 配置的映射表见 L71-L100每条配置包含component实际的转场 Vue 组件duration转场总时长毫秒exitDuration可选的退场时长nextDelay可选的导航触发延迟导航时机的默认逻辑为nextDelay ?? duration / 3即默认在转场进行到约 1/3 处发起路由跳转保证新页面在遮罩打开的过程中就开始加载的流畅观感。3.3 Hook 系统与编排流程组件提供addTransitionHook(hook)APIL106-L116调用方注册 Hook 后会拿到一个移除函数用于解绑triggerHooksL119-L131会按注册顺序依次await执行所有 Hook并在单个 Hook 抛错时打印Error in transition hook at stage ...而不会中断整个流程。导航编排是这套系统的关键L133-L242名字为none或未注册的转场直接放行next()通过临时注册的navigationHook 响应navigation阶段用hasNavigated标志保证next()只调用一次若上一个转场仍在播放showTransition为真会先快进触发退场阶段、等待 50ms 再启动新转场提供了多重兜底navigation阶段超时未处理时强制导航finally中还会以duration * 2的保守超时再次兜底确保路由永远不会被卡死。3.4 与 vue-router 的自动集成组件在setup中直接注册了router.beforeEach全局前置守卫L251-L284逻辑清晰传入disableTransitions时直接放行方便测试与降级目标路由to.meta.stageTransition不是对象时放行usePageSpecificTransitions且页面声明了pageSpecificAvailable时放行页面级自定义转场优先否则用组件 Props 中的primaryColor/secondaryColor/tertiaryColor/colors/zIndex覆盖meta 中的对应字段再触发triggerTransition(stageTransition, next)。模板层则通过component :is...动态渲染当前激活的转场组件并透传stageTransition参数L287-L294。从源码结构看这套设计的目标是把主题色、层级、禁用开关全部收敛到StageTransitionGroup一个入口上页面侧只需声明我想用什么转场。四、definePage用路由 meta 声明页面转场日志提到当日实验了unplugin-vue-router提供的definePage宏并确认非常适合我的场景决定沿用这条路线。Playground 中的页面源码印证了这套用法例如 playground/src/pages/index.vueimport { definePage } from vue-router/experimental import Buttons from ../components/Buttons.vue definePage({ meta: { stageTransition: { name: slide, }, }, })也就是说每个页面只需要在definePage里声明stageTransition.name以及可选的颜色、方向等字段路由切换时转场就会被自动触发——页面代码零动画逻辑转场完全由StageTransitionGroup统一接管。这正是日志中设计一套可扩展、灵活的机制供其他页面使用的落地形态。Playground 中 transition-2.vue 到 transition-7.vue 共 6 个演示页 首页覆盖了全部 7 种转场效果的在线试玩。五、Playground 与 Netlify 部署约定日志宣布了一条团队约定从今往后每个包的 Playground 都以proj-airi${subDirectory}${packageName}模式命名 Netlify 部署。例如本次的转场组件库部署在Playground 演示页https://proj-airi-packages-ui-transitions.netlify.app/#/官方部署已集成进主站舞台https://airi.moeru.ai仓库中 packages/ui-transitions/netlify.toml 与 playground 目录即为该 Playground 的实际载体。这种一包一 Playground 统一命名空间的模式让每个 UI 包都拥有可独立预览、可被 CI/CD 自动发布的演示环境便于社区直接体验效果。当日日志还提到为/docs路径配置 200 重定向代理的折腾过程最终已解决细节留待后续 DevLog 记录反映了文档站点与主站多域名共存的部署权衡。六、落地与踩坑主站舞台集成与移动端修复日志的 DevStream 部分记录了把舞台转场组件集成进 AIRI 官网主舞台的真实过程并不顺利——作者在之前的动画组件设计中发现了几个 bug当日已修复并且直播结束后在手机上实测时发现桌面和平板正常但移动端动画被意外破坏计划次日修复。这条记录传达了两个工程经验转场动画的组件化不是终点集成到真实路由系统后才会暴露设计缺陷时序、position: fixed在移动端视口下的表现、软键盘 / 地址栏变化对视口高度的影响等必须多端回归验证全屏遮罩类动画在桌面、平板、手机上的渲染差异很大而 DevStream 的实时演示恰好提供了发现问题 → 当场修复 → 次日跟进的快速迭代节奏。七、当日模型与生态调研Phi-4-mini、DeepSeek 开源基础设施与 AIBrix日志后半部分记录了面向 AIRI 智能体能力的行业调研属于当日技术视野的延伸Microsoft Phi-4-mini日志确认该模型原生内置 function calling 能力这意味着终于可以基于预训练支持来构建 Agent 了不再需要为小模型额外做工具调用的对齐/微调DeepSeek 开源基础设施索引open-infra-index调研了 DeepSeek 团队此前一周发布的开源仓库集合为 AIRI 的推理与服务链路选型提供参考字节跳动开源的 LLM 网关 AIBrix作为 vLLM 生态下的 LLM 网关方案被纳入调研范围这类网关通常负责路由、限流、模型编排与 AIRI 的多模型接入诉求直接相关。需要说明的是日志只是记录了调研这一动作与初步结论Phi-4-mini 的 function calling 能力并未给出最终集成决策AIRI 的核心 Agent 能力由仓库中的packages/core-agent承载读者可以结合该包继续深入。八、总结从 DevLog 看可复用动画工程的四步方法论通读 2025-03-06 的 DevLog 并结合packages/ui-transitions源码可以提炼出一条清晰的工程路径选型与致敬选定 yui540 的高质量 CSS 动画作为美学基础保留原作者署名与来源注释组件化封装把 CSS 变量提升为组件 Props让颜色、层级、时长可被外部主题系统覆盖路由级编排通过StageTransitionGroup的七阶段生命周期 definePage元信息声明把页面级转场从页面代码中彻底解耦同时用多重兜底保证导航永不卡死持续迭代验证借助 Netlify Playground 与 DevStream 演示加速反馈并针对移动端等真实环境持续修复。如果你也在为自己的 Vue 项目设计转场系统这套「注册表驱动 生命周期 Hook 路由守卫集成」的架构是很好的参考范本——而 AIRI 的整个演进过程都记录在仓库 docs/content/en/blog 的每日 DevLog 序列中值得持续追踪。【免费下载链接】airi Self hosted, you-owned Grok Companion, a container of souls of waifu, cyber livings to bring them into our worlds, wishing to achieve Neuro-samas altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考