- MonoVanilla · build 261017-9

MonoVanilla 兼容动画包 · 演示

MonoVanilla 是一套纯 CSS + ES5 的兼容动画包，无构建、无框架、无依赖。 目标：Chrome 38 可运行 / Chrome 49 完整。可用老浏览器直接打开本页验证效果。

1. 入场揭示 · rowFade + 逐行错峰

错峰由 .mv-stagger > :nth-child(n) 实现，Chrome 38 无需 CSS 变量即可工作。

2. 弹出 · tipPop / colorPanelIn / colorSwatchPop / rateStarPop

★★★★★

点星星触发 rateStarPop；tipPop 使用 -webkit-filter 兜底，Chrome 38 亦可见缩放淡入。

3. 日历 · calendarPanelIn / calendarMonthInLeft / Right

日历 rotateX 未配 perspective，保留纵向压平效果。

4. 流光骨架 · kineticShimmer / textShimmer / progressStripe / rowShimmer

正在生成 · MonoVanilla Text Shimmer

名称状态
组件 A加载中…
组件 B加载中…

5. 反馈 · shake / spin / ping / pulse / uploadBreath

拖拽文件到此处上传（uploadBreath）

6. 折叠面板 · Element.animate() 高度补间（含 ES5 回退）

展开时高度 0 -> 内容高，同时淡入；收起时相反。
优先使用 Web Animations API，无 WAAPI 的老浏览器回退到 requestAnimationFrame 线性补间。
用户开启 reduced-motion 时直接跳到终态。

7. 入场动效 · opacity + translateY + scale + blur（全站默认）

默认 700ms cubic-bezier(.16,1,.3,1)；blur(12px) 用 -webkit-filter 兜底，老浏览器忽略 blur 仍保留淡入+位移。

8. 交互过渡 · press / lift

悬停上浮 mv-lift

9. 指示条 / 轨道 / 揭示 · slideTo / translateX / reveal

幻灯片 1
幻灯片 2
幻灯片 3
max-height 过渡揭示，可用于 StreamingText 展开、面板显示。

10. 通知 / 提示条 · message-flip / notif-flip-*（命令式）

Message / Notification 是命令式 API。MVAnim.notification() 生成玻璃拟态卡片：半透明面 + 背景模糊、按色调描边与图标、底部一条随自动消失而收缩的倒计时条；堆叠时兄弟项 FLIP 平滑位移。

11. 浮层 · dialog-pop / drawer-right / dropdown / alert

!
支付失败

对话框 = dialog-pop（面板 16px 模糊 + 0.92 缩放）+ dialog-mask（遮罩淡入）；抽屉 = drawer-right（整侧滑入）；菜单 = dropdown（左上角原点缩放 + 模糊）。点击遮罩外或菜单外部会关闭菜单。

MVAnim.hasAnimate() = - / MVAnim.reduced() = -