本文详解 intersection observer 配合 css 过渡实现文本懒加载淡入效果，重点纠正 `transform: opacity 3s` 的常见误写，并提供可直接运行的完整代码方案。
在使用 Intersection Observer 实现元素“进入视口时淡入”效果时，一个高频出错点是混淆了 CSS 属性与过渡声明：transform: opacity 3s 是无效语法——transform 是变换函数（如 translateY()、scale()），而 opacity 是独立属性，其过渡必须通过 transition: opacity 3s 声明。
✅ 正确写法（CSS）
.hidden {
opacity: 0;
transition: opacity 3s ease-out; /* 关键：transition 控制 opacity 变化 */
}
.show {
opacity: 1;
}⚠️ 注意：transition 必须定义在初始状态（.hidden）上，且需包含要过渡的属性名（opacity）、持续时间（3s）和缓动函数（推荐 ease-out 或 cubic-bezier(0.25, 0.46, 0.45, 0.94) 提升自然感）。
✅ JavaScript 逻辑优化建议
原代码中，当元素离开视口（intersectionRatio
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
entry.target.classList.add('show');
} else {
// 不主动移除 show 类，让 CSS 过渡自然回落（可选）
// entry.target.classList.remove('show');
}
});
}, { threshold: [0.5] });
document.querySelectorAll('.hidden').forEach(el => observer.observe(el));
? 提示：若希望“离开视口后淡出”，需保留 remove('show') 并确保 .hidden 类始终存在（即不依赖 !important 覆盖），同时 transition 已全局生效，浏览器会自动补全反向过渡。
✅ 完整可运行示例（精简版）
Text Fade-in with Intersection Observer Scroll down to fade in!This one fades in too.
? 调试小贴士
- 检查开发者工具的 Computed 面板，确认 .hidden 元素是否正确应用了 transition: opacity 3s；
- 确保 .show 类未被更高优先级样式（如 !important）阻断；
- 若动画仍不触发，尝试临时添加 background: red 到 .show 类，验证类切换是否生效；
- 移动端需注意：部分 iOS Safari 版本对 intersectionRatio 支持不稳定，可降级为 entry.isIntersecting 判断。
通过以上修正，文本将在视口内达到 50% 可见度时，平滑地从透明度 0 过渡至 1，真正实现“淡入”而非“闪现”。这是现代 Web 性能优化与用户体验兼顾的标准实践。
