必须由JS显式触发opacity状态变更才能确保CSS淡入动画可靠执行，初始用.fade-in-pending设opacity:0并配transition，DOMContentLoaded或IntersectionObserver触发后切换为.fade-in-ready（opacity:1+transform:translateZ(0)），同时同步更新tabindex和aria-hidden以保障可访问性。
用 CSS transition + JavaScript 控制 opacity
直接写 opacity: 0 然后靠 CSS 动画自动淡入不可靠——浏览器可能在样式计算完成前就渲染了按钮，导致“闪一下”或根本没动画。必须由 JS 显式触发状态变更，让 transition 有起点和终点。
- HTML 按钮初始不加
style="opacity: 0"，而是加一个 class，比如class="add-to-cart fade-in-pending" - CSS 中定义：
.fade-in-pending { opacity: 0; transition: opacity 0.3s ease-out; }和.fade-in-ready { opacity: 1; } - JS 在
DOMContentLoaded后移除fade-in-pending、加上fade-in-ready，或者直接element.style.opacity = 1
别用 visibility: hidden 替代，它不会触发 transition；也别依赖 setTimeout 延迟加 class，页面加载快慢不一，容易失效。
避免滚动时才触发（即“懒加载式淡入”）
如果按钮在首屏外，用户滚动到它才淡入，就得监听 IntersectionObserver。但注意：默认情况下，IntersectionObserver 的 rootMargin 是 "0px"，意味着元素必须完全进入视口才触发——按钮常卡在临界线不动。要提前入场，得设 rootMargin: "100px"。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 对每个带
data-fade-in的按钮初始化 observer：new IntersectionObserver(handleIntersect, { rootMargin: "100px" }) -
handleIntersect里检查entry.isIntersecting，是则加fade-in-ready并unobserve(entry.target) - 不要给所有按钮共用一个 observer 实例再反复调用
observe()，容易内存泄漏
移动端 Safari 下 opacity 动画卡顿的绕过方法
iOS Safari 对纯 opacity transition 有渲染优化 Bug，尤其在低配设备上会掉帧。加 transform: translateZ(0) 或 will-change: opacity 能强制启用 GPU 加速，但后者有性能代价，只应在必要时用。
立即学习“前端免费学习笔记（深入）”；
- 稳妥写法：
.fade-in-ready { opacity: 1; transform: translateZ(0); } - 别写
will-change: opacity在 class 里长期生效，应 JS 触发前临时加，动画结束立刻移除 - 如果按钮用了
position: fixed或absolute，确保父容器没overflow: hidden，否则 Safari 可能裁掉过渡过程
按钮淡入后焦点管理被忽略的问题
淡入完成的按钮若需键盘可访问（比如按 Tab 进入），不能只靠视觉变化。用户从上一个可聚焦元素按 Tab 时，如果按钮还没 ready，焦点会跳过它——因为 opacity: 0 不影响可聚焦性，但 JS 还没给它加 tabindex 或移除 aria-hidden。
- 初始 HTML 中，按钮应带
tabindex="-1"和aria-hidden="true" - 淡入完成后，JS 改为
tabindex="0"和aria-hidden="false"（或直接删属性） - 如果按钮是表单操作入口，还要确保它在逻辑顺序中位置正确，别因
position: absolute导致 tabindex 乱序
transition。 
