用途:为模态框、对话框、弹出层和遮罩内容设计平滑的进入与退出动画,避免生硬跳变。
主要能力:把迪士尼动画十二原则映射到模态动画上,包括:缩放 0.9→1.0 的挤压拉伸;触发按钮先轻微缩小作为预备动作;遮罩变暗(0.5-0.7 不透明度)并可轻微模糊背景(4-8px)以突出主体;定义 hidden、entering、visible、exiting 状态;容器先到、内容延迟 50-100ms 淡入的跟随与重叠动作;进入用 ease-out、退出用 ease-in;从按钮出发时走弧线;遮罩淡出与内容错峰作为次要动作;给出时间建议(遮罩 200-250ms、进入 250-350ms、退出 200ms、内容每项错峰 30-50ms、错误抖动 300ms);重要提示可轻微过冲至 1.02 或抖动;阴影与圆角保持一致、动画中内容不溢出。
使用方式:以 CSS 实现,遮罩用 transition: opacity 250ms ease-out;模态用 animation: modalEnter 300ms cubic-bezier(0.16, 1, 0.3, 1),关键帧从 opacity:0、transform: scale(0.9) translateY(20px) 到 opacity:1、transform: scale(1) translateY(0)。关键属性包括 transform 的 scale/translate、opacity、backdrop-filter 模糊、animation 关键帧序列与 transform-origin 原点。
适用场景:需要提升交互质感的模态、对话框、弹窗与遮罩层动画。
限制:资料未提供具体框架或库的集成方式、浏览器兼容性说明及无障碍相关处理,暂未提供。