用途 m-animate 用于为网页添加有目的性的动效,而非装饰性动画。它聚焦三类常见交互时机:页面加载、悬停状态与滚动进入,帮助页面在视觉上更有层次与反馈感。
主要能力
- 页面加载:采用错峰(staggered)淡入上移效果,元素之间延迟 80-120ms,整体动效在 600ms 内完成。
- 悬停状态:使用 1.02-1.05 的缩放、阴影抬升以及颜色过渡,过渡时长 200-300ms。
- 滚动进入:通过 IntersectionObserver 实现淡入并配合 20-30px 的位移。
- 过渡声明:所有交互状态都需要添加 transition 声明。
- 无障碍降级:始终包含 prefers-reduced-motion: reduce 的回退处理。
使用方式 资料中未提供具体安装命令、代码示例或调用步骤,暂未提供。
适用场景 适用于需要为网页界面补充加载、悬停与滚动动效的前端开发场景,尤其关注动效节奏、时长与无障碍适配的实现。
限制 资料未说明支持的框架、浏览器兼容范围、依赖要求或配置项,暂未提供。