当前位置：首页 > JavaScript

js实现淡入

2026-02-01 07:58:46JavaScript

使用CSS和JavaScript实现淡入效果

淡入效果可以通过结合CSS的opacity属性和JavaScript的定时器或动画API来实现。以下是几种常见方法：

方法一：使用setInterval逐步增加透明度

通过JavaScript的setInterval函数逐步增加元素的opacity值，从0（完全透明）到1（完全不透明）。

function fadeIn(element, duration) {
    let opacity = 0;
    const interval = 50; // 毫秒
    const step = interval / duration;

    const timer = setInterval(() => {
        opacity += step;
        element.style.opacity = opacity;

        if (opacity >= 1) {
            clearInterval(timer);
        }
    }, interval);
}

// 使用示例
const element = document.getElementById('myElement');
fadeIn(element, 1000); // 淡入持续1秒

方法二：使用CSS transition和JavaScript触发

通过CSS定义过渡效果，JavaScript只需修改opacity属性即可触发动画。

.fade-in {
    opacity: 0;
    transition: opacity 1s ease-in;
}

.fade-in.active {
    opacity: 1;
}

function fadeIn(element) {
    element.classList.add('fade-in');
    // 强制重绘以确保过渡生效
    void element.offsetWidth;
    element.classList.add('active');
}

// 使用示例
const element = document.getElementById('myElement');
fadeIn(element);

方法三：使用Web Animations API

现代浏览器支持Web Animations API，可以更高效地创建动画。

function fadeIn(element, duration) {
    element.animate([
        { opacity: 0 },
        { opacity: 1 }
    ], {
        duration: duration,
        fill: 'forwards'
    });
}

// 使用示例
const element = document.getElementById('myElement');
fadeIn(element, 1000);

方法四：使用requestAnimationFrame

requestAnimationFrame提供更流畅的动画性能，适合复杂动画场景。

js实现淡入

function fadeIn(element, duration) {
    let start = null;
    const initialOpacity = 0;
    const targetOpacity = 1;

    function animate(timestamp) {
        if (!start) start = timestamp;
        const progress = timestamp - start;
        const opacity = initialOpacity + (targetOpacity - initialOpacity) * (progress / duration);

        element.style.opacity = opacity;

        if (progress < duration) {
            requestAnimationFrame(animate);
        }
    }

    requestAnimationFrame(animate);
}

// 使用示例
const element = document.getElementById('myElement');
fadeIn(element, 1000);