正确写法是transition: opacity 0.3s ease, transform 0.3s ease；初始状态需同时设opacity: 0、transform: translateY(10px)和visibility: hidden，JS触发时须强制重排（如el.offsetHeight），淡出后监听transitionend（propertyName==='opacity'）再设visibility: hidden。
transition 必须写全 opacity 和 transform，不能只写 all
只写 transition: all 0.3s ease 看似省事，实际会导致提示框在显示瞬间“抽搐”或延迟启动——比如父容器 font-size 变动引发 line-height 微调，all 就会把这微小变化也纳入过渡，干扰 opacity 和 translateY 的主节奏。更关键的是：首次淡入时若没设初始 opacity 和 transform，浏览器根本找不到过渡起点，动画直接静默失败。
正确写法是明确声明两个属性：transition: opacity 0.3s ease, transform 0.3s ease。这两项必须同时存在，且写在默认状态（非 :hover、非 .show）里。
初始状态要同时设 opacity: 0 和 transform: translateY(10px)
上浮效果本质是 transform: translateY() 从下往上移动，所以初始位移值不能为 0。常见错误是只设 opacity: 0，结果淡入时元素原地变亮，毫无“浮起”感。
-
opacity: 0控制可见性，必须写在默认类中（如.tooltip） -
transform: translateY(10px)提供起始偏移，数值建议 8–12px，太小不明显，太大易显突兀 - 必须搭配
visibility: hidden，否则透明但可点击，交互出错 - 不要用
display: none做初始隐藏——它会让元素退出布局流，transform过渡直接失效
JS 触发时避免“一闪而过”，强制重排是关键
直接写 el.style.opacity = '0'; el.style.transform = 'translateY(10px)'; el.style.opacity = '1'; el.style.transform = 'translateY(0)';，浏览器会合并渲染，中间帧被跳过，肉眼只看到最终态。
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
修复方式很简单，在两组赋值之间插入一次布局读取：
- 轻量方案：
el.offsetHeight（最常用，无副作用） - 等效方案：
getComputedStyle(el).opacity - 更推荐操作 class：
el.classList.remove('show');→el.offsetHeight;→el.classList.add('show');
这样能确保浏览器分两帧计算样式，过渡自然触发。
淡出后释放空间和防点击穿透要分步处理
很多人一气呵成写 opacity: 0; transform: translateY(10px); visibility: hidden;，结果动画卡在半途——因为 visibility 不支持过渡，一设就立刻生效，opacity 和 transform 的过渡直接被中断。
正确流程必须监听事件：
- 监听
transitionend，且只响应propertyName === 'opacity'（避免 transform 结束早于 opacity 导致误判） - 在回调里设
visibility: hidden或display: none（后者用于彻底释放布局空间） - 如果提示框需反复使用，别用
remove()，改用classList.remove('show')+ 事件清理，保持 DOM 稳定
真正容易被忽略的是：上浮距离和淡入时长的匹配。10px 位移配 0.3s 是舒适区间；若位移加大到 20px，时长却没同步加到 0.45s，就会感觉“浮得太急”，失去提示框应有的轻量提示感。
