移动端H5需用长按模拟右键并添加缩放过渡效果：1. 用touchstart/touchend检测长按并动态创建绝对定位菜单；2. 用transform: scale(0→1)与opacity双过渡配合cubic-bezier回弹曲线；3. 先定位再延后一帧添加.show类避免闪现；4. 关闭时同样缩放收起并监听transitionend清理DOM。
移动端没有真正意义上的“右键”，H5 中需用长按（touchstart + 定时判定）替代，并为自定义菜单添加缩放过渡效果，核心是结合 CSS transform: scale() 与 transition，同时确保触发逻辑稳定、定位准确、动画自然。
1. 长按检测并动态创建菜单
避免依赖不稳定的 contextmenu（iOS Safari 15+ 才较可靠），改用纯 touch 事件模拟长按：
- 监听目标元素的
touchstart，记录起始时间； - 在
touchend时判断持续时长（如 ≥ 500ms），满足则调用showCustomMenu(e)； - 菜单 DOM 应一次性创建（或复用），避免频繁增删；
- 菜单元素需设
position: absolute，初始scale(0)并隐藏（opacity: 0或visibility: hidden）。
2. 菜单样式中加入缩放过渡
关键不是“弹出”，而是“从无到有”的视觉反馈。推荐用 scale + opacity 双过渡：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
.custom-context-menu {
position: absolute;
transform: scale(0);
opacity: 0;
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.25s ease;
transform-origin: center;
z-index: 1000;
}
<p>.custom-context-menu.show {
transform: scale(1);
opacity: 1;
}-
cubic-bezier(0.34, 1.56, 0.64, 1)是轻微“过冲回弹”曲线，比线性更显轻盈； -
transform-origin: center确保缩放以菜单中心为基准，不偏移； - 不要只用
display: none/block切换——它无法触发 CSS 过渡。
3. 正确定位 + 动态显示
不能直接用 e.touches[0].clientX/Y 赋值 left/top 后再加 show 类——那样会先闪现再缩放。正确流程是：
- 先将菜单
append到document.body； - 立即设置
left和top（基于触摸点 + 滚动偏移：window.scrollX/window.scrollY）； - 使用
requestAnimationFrame或setTimeout(..., 0)延迟一帧，再添加.show类触发过渡； - 若菜单宽高已知，可提前计算是否越界（如右侧超出视口，则 left = window.innerWidth - width - 12），避免缩放中跳动。
4. 关闭时也加缩放收起动画
提升一致性体验：
- 点击菜单项或空白处时，不直接
remove()，而是先移除.show类； - 监听
transitionend事件，待scale回到 0 后再清理 DOM； - 或用
getComputedStyle(menu).transform判断缩放结束（兼容性更强）。
缩放过渡本身不复杂，但容易忽略定位时机与过渡触发节奏。只要菜单 DOM 存在、样式过渡启用、类名切换延后一帧，就能实现顺滑的“浮现式”长按菜单。
