菜单从哪里来？
观察同一缩放动画更换原点后的空间感。
互动实验在真实界面中看
02 — COMPARE / 看见方法的作用
同一个任务，换一种处理方式。
先看两种实现，再找出让交互更清楚的那条规则。
未使用 Skills · 基础实现基础版本
围绕菜单中心缩放。
使用 Skills · 应用交互规则规则应用
围绕靠近触发按钮的角缩放。
01 / 改了什么
动画原点与触发位置对应。
02 / 为什么这样改
原点解释来源，定位决定菜单在哪里。
03 / 什么时候不需要
发生视口碰撞翻转时原点也要相应调整，不能固定所有场景。
教学示意，非 AI 生成实测。两侧的任务、内容和输入条件一致；只比较这里说明的规则。Skills 不保证每次生成相同结果。
03 — APPLY / 放进真实项目
原点解释来源，定位决定菜单在哪里。
01右上角按钮打开的菜单，以靠近按钮的角为视觉锚点。
02菜单出现即能操作，不等待过渡完成。
03Escape 关闭并将焦点交还触发按钮。
适合用在操作菜单轻量浮层上下文选项
把这段需求，交给你的 AI
在操作按钮下方显示浮层，围绕触发点缩放入场。浮层位置限制在视口内，提供 Escape、点击外部关闭与焦点恢复。减少动态效果时直接显示。
实现代码与机制 ＋
以下片段解释核心机制，需要与状态、语义和清理逻辑一起使用。页面演示由本地受控组件实现。
.popover { transform-origin: top right;
animation: enter 180ms cubic-bezier(.19,1,.22,1); }
@keyframes enter { from { opacity: 0; transform: scale(.94); } }原理、来源与适用边界 ＋
发生视口碰撞翻转时原点也要相应调整，不能固定所有场景。
减少动态效果时去掉装饰位移、回弹和自动连续播放，保留功能、状态文字与手动查看步骤。
阅读对应的中文方法笔记 ↗本案例是独立教学实现。前后对比说明具体规则，不是对某个模型的效果承诺。