js 实现fadein

实现 fadeIn 效果的方法

在 JavaScript 中实现 fadeIn 效果可以通过多种方式完成，以下是几种常见的实现方法：

使用 CSS transition 和 JavaScript

通过添加 CSS 的 transition 属性，结合 JavaScript 修改元素的透明度来实现渐变效果。

function fadeIn(element, duration) {
    element.style.opacity = 0;
    element.style.transition = `opacity ${duration}ms`;
    element.style.display = 'block'; // 或其他合适的显示方式

    // 强制触发重绘
    setTimeout(() => {
        element.style.opacity = 1;
    }, 10);
}

使用纯 JavaScript 动画

通过 requestAnimationFrame 逐步增加元素的透明度，实现平滑的渐变效果。

function fadeIn(element, duration) {
    let start = null;
    element.style.opacity = 0;
    element.style.display = 'block';

    function step(timestamp) {
        if (!start) start = timestamp;
        const progress = timestamp - start;
        const opacity = Math.min(progress / duration, 1);
        element.style.opacity = opacity;

        if (progress < duration) {
            window.requestAnimationFrame(step);
        }
    }

    window.requestAnimationFrame(step);
}

使用 jQuery

如果项目中已经引入了 jQuery，可以直接使用其内置的 fadeIn 方法。

$(element).fadeIn(duration);

使用 CSS animation

通过定义 CSS 关键帧动画，然后通过 JavaScript 添加动画类。

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 1s ease-in;
}

function fadeIn(element) {
    element.classList.add('fade-in');
    element.style.display = 'block';
}

注意事项

• 在开始动画前，确保元素初始状态为 opacity: 0 和 display: none。
• 使用 requestAnimationFrame 可以避免动画卡顿，提供更流畅的效果。
• 如果需要支持旧版浏览器，可能需要添加 CSS 前缀或使用 polyfill。