Intersection Observer文本淡入失效：文本直接显示无过渡效果

问题描述 #

使用Intersection Observer实现文本懒加载，预期文本进入视口50%时，从opacity: 0平滑过渡到opacity: 1，但实际文本直接显示，无过渡效果，CSS中设置的transform: opacity 3s未生效。

核心问题 #

CSS过渡属性使用错误：transform是用于元素变换（如平移、缩放、旋转）的属性，实现透明度过渡应该使用transition属性。

修复步骤 #

1. 修正CSS过渡属性 #

将.hidden类中的transform: opacity 3s替换为transition: opacity 3s，确保过渡效果能在opacity属性变化时触发：

.hidden {
    opacity: 0;
    /* 错误写法：transform: opacity 3s; */
    transition: opacity 3s; /* 正确写法 */
}

.show {
    opacity: 1;
}

2. 可选：优化Intersection Observer逻辑（按需选择） #

如果希望文本仅在首次进入视口时淡入，不需要滚动离开时隐藏，可以修改JS逻辑，避免重复添加/移除类：

const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if (entry.intersectionRatio >= 0.5) {
            entry.target.classList.add('show');
            observer.unobserve(entry.target); // 观察一次后停止监听
        }
    }) 
}, {threshold: [0.5]})

const hiddenElement = document.querySelectorAll('.hidden')
hiddenElement.forEach(el => observer.observe(el))

3. 验证元素状态 #

确保.hidden类正确应用到目标文本元素上，且没有其他CSS规则覆盖opacity或transition属性。

修改后的完整CSS（关键部分） #

/* ... 其他CSS代码保持不变 ... */

.hidden {
    opacity: 0;
    transition: opacity 3s;
}

.show {
    opacity: 1;
}

/* ... 其他CSS代码保持不变 ... */

内容的提问来源于stack exchange，提问作者Ethan Suwan