页面初次加载时触发淡入动画需用CSS+少量JS配合：根容器设opacity:0和transition，DOM加载完成（DOMContentLoaded）后添加类如is-loaded使opacity:1，关键要内联关键CSS或用visibility:hidden防闪屏，并搭配transform:translateZ(0)触发GPU加速。
页面初次加载时如何触发淡入动画
HTML 本身不支持动画，必须靠 CSS + 少量 JS 配合。关键在于：元素默认隐藏，等 DOM 加载完成后再加类触发 opacity 和 transition。直接在 上写 opacity: 0 会导致白屏——因为样式还没加载完就已生效。
实操建议：
- 给根容器（如
<main></main>或带id="app"的元素）初始设opacity: 0; transition: opacity 0.4s ease-out; - 用
document.addEventListener('DOMContentLoaded', ...)而非window.onload，避免等图片/字体拖慢动画启动 - JS 中添加一个类（如
is-loaded），CSS 里写.is-loaded { opacity: 1; } - 若用 Vue/React，别在 mounted/useEffect 里才加类——首屏渲染可能已闪现一次，应在 SSR 或 hydration 前控制初始状态
CSS transition 写在哪？为什么不能只写 opacity
只对 opacity 做过渡是常见误区，但动画会卡顿或不触发：Chrome 对纯 opacity 变化有时跳过合成层，尤其在低配设备上。必须搭配 transform: translateZ(0) 或 will-change: opacity 强制 GPU 加速。
推荐写法：
立即学习“前端免费学习笔记（深入）”；
.fade-in {
opacity: 0;
transition: opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fade-in.is-loaded {
opacity: 1;
transform: translateZ(0);
}
注意：cubic-bezier(0.25, 0.46, 0.45, 0.94) 比 ease-out 更自然；transform 值无需实际位移，只为触发生效。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
如何避免“闪一下再淡入”的问题
这是最常被忽略的坑：HTML 解析到 <style></style> 前，浏览器已开始渲染未样式化的 DOM，导致内容先全显、再淡入——视觉上就是“闪”。
解决方式只有两个有效路径：
- 把关键 CSS（含初始
opacity: 0）内联在中，确保样式与 HTML 同步解析 - 给
加style="visibility: hidden;"，然后在 JS 加载后改为visibility: visible，同时配合 fade 类。注意：不能用display: none，否则会阻断所有子元素过渡 - 服务端渲染场景下，可在 HTML 模板中直接输出
<main class="fade-in is-loaded"></main>，跳过 JS 触发步骤（适合静态页）
淡出（比如页面跳转前）怎么安全实现
淡出不是简单加个类就完事。如果 JS 立即跳转，动画根本没机会播放。必须监听 transitionend 事件，且只监听一次。
关键点：
- 用
element.addEventListener('transitionend', handler, { once: true })防止多次绑定 - 检查
event.propertyName === 'opacity'，避免 transform 动画误触发 - 跳转前手动调用
history.pushState()或location.href = '...'，别依赖<a href></a>默认行为 - SPA 中更稳妥的做法是：路由守卫里先加
is-unloading类 → 等动画结束 → 再执行next()或navigate()
复杂点在于：动画时间必须和 JS 跳转严格对齐，差 50ms 都可能看到半透明残留。测试时务必关掉浏览器开发者工具的“禁用缓存”，否则本地 CSS 加载延迟会掩盖问题。
