纯css实现悬浮按钮淡入淡出只需opacity+transition，必须声明transition: opacity 0.3s ease、初始opacity: 0与visibility: hidden、显示时opacity: 1与visibility: visible，并同步更新pointer-events。
直接用 opacity + transition 就够了，但必须写全声明
悬浮按钮的淡入淡出不需要 JS，纯 CSS 即可完成。关键不是“加个动画”，而是让浏览器明确知道“从哪变到哪”和“怎么变”。opacity 是唯一必须控制的属性，transition 必须写成 transition: opacity 0.3s ease;——不能简写为 transition: all 0.3s;，否则可能意外触发 transform 或 box-shadow 的过渡，导致按钮抖动或延迟出现。
初始状态必须设 opacity: 0;，同时搭配 visibility: hidden;，否则按钮虽然透明，仍占位、可点击；显示时再设 opacity: 1; 和 visibility: visible;。
- IE9+ 原生支持，不用 fallback
- 过渡时间建议落在
0.25s–0.4s区间：短于0.2s人眼难察觉，长于0.5s会拖慢交互节奏 - 别在
:hover或.show类里单独写transition，它必须定义在默认状态（即未悬停/未激活时）
JS 控制出场时为什么常“一闪而过”？
常见错误是连续写两行样式赋值：btn.style.opacity = '0'; → btn.style.opacity = '1';。浏览器会把这两次修改合并为一次渲染，中间帧被跳过，结果就是没有过渡动画。
真正起作用的是“强制重排”或“class 切换”：
- 插入
btn.offsetHeight;在两句之间，轻量且可靠 - 更推荐做法：先移除
show类，再执行offsetHeight，最后添加show类——这样能确保 class 变更被分帧处理 - 如果按钮是动态插入 DOM 的（比如通过
document.createElement），务必等元素挂载后再操作 class，否则transition不会生效
淡出后怎么安全隐藏并释放布局空间？
很多人一淡出就立刻设 display: none 或 visibility: hidden，结果动画卡在半途——因为这两个属性不支持过渡，一设就立即生效，opacity 过渡直接中断。
正确做法是监听 transitionend 事件：
- 只监听一次：
btn.addEventListener('transitionend', handler, { once: true }); - 回调里再设
btn.style.display = 'none';或btn.style.visibility = 'hidden'; - 如果按钮要反复使用，记得在淡入前先清除
display: none，否则opacity过渡根本不会启动
多个悬浮按钮批量淡入，怎么避免“齐刷刷一起蹦出来”？
用 for 循环同步操作每个按钮的 style.opacity 或 class，所有动画都会在同一帧开始，完全失去 stagger 效果。
优先用 CSS 原生方案：
- 给每个按钮加不同
animation-delay，例如animation-delay: calc(var(--i) * 0.1s);，配合--i自定义属性递增 - 若必须用 JS，用
setTimeout错开调用时机，延迟步长控制在50ms–100ms较自然 - 避免在循环里反复读取
offsetHeight，它会强制重排，性能损耗大；改用getComputedStyle或统一延迟处理
真正容易被忽略的是：淡入淡出只是视觉反馈，不是功能开关。按钮的 pointer-events 状态必须和 opacity / visibility 同步更新，否则用户可能点中一个看不见却仍可交互的按钮。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
