确实有一种更简单的方法来实现当 `div` 进入视口时显示的特效，可以利用纯CSS的方式来完成，而不需要使用JavaScript。这种方法主要依赖于CSS中的`@keyframes`动画和`animation`属性结合`scroll`事件触发。

不过，值得注意的是，纯CSS方法在检测元素进入视口方面不如JavaScript灵活和精确。但如果你的需求较为简单，下面的方法可能就足够了。

使用纯CSS

首先，在HTML中定义你的目标 `div`：

<div class="fade-in">
    当我进入视口时会淡入。
</div>

接下来，定义CSS样式和动画：

/* 初始状态 */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 1s ease forwards;
    /* 注意：这里我们定义了动画但是没有立即执行它 */
}

/* 定义关键帧动画 */
@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 利用伪类检查是否在视口内 */
.fade-in {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: no-preference) {
    .fade-in.in-viewport {
        animation-play-state: running;
    }
}

然而，上述代码并不会自动工作，因为仅靠CSS无法检测元素何时进入视口。为了解决这个问题，你通常需要一小段JavaScript来添加一个特定的类（例如`.in-viewport`），当元素进入视口时激活动画：

document.addEventListener('DOMContentLoaded', function() {
    var elements = document.querySelectorAll('.fade-in');

    function checkScroll() {
        elements.forEach(function(el) {
            var rect = el.getBoundingClientRect();
            if (rect.top <= window.innerHeight - 50) {
                el.classList.add('in-viewport');
            }
        });
    }

    // 监听滚动事件
    window.addEventListener('scroll', checkScroll);
    // 页面加载时也检查一次
    checkScroll();
});

这段JavaScript代码监听了`scroll`事件，并检查每个带有`.fade-in`类的元素是否进入了视口。如果元素进入了视口，则为其添加`.in-viewport`类，从而触发动画效果。

虽然这看起来并不是“完全”的纯CSS解决方案，但它尽可能减少了对JavaScript的依赖，同时保持了相对简单的实现方式。这种方法适用于大多数基本场景。对于更复杂的场景或更高的精度需求，建议使用Intersection Observer API，如之前所提到的。

修改时间 2025-08-13