网页内容切换时JavaScript淡入淡出+位移动画异常问题求助

Hey there! Let's break down why your animations aren't working as expected when you add the fade-in effect. The core issues are how you're handling element visibility timing and not setting up proper CSS for both the slide and fade transitions.

What's Going Wrong Right Now #

1. Setting display: none immediately cuts off the transition animation for the current element, since the browser removes it from the layout before the fade can finish.
2. Your current CSS only handles opacity, not the slide movement—so even if you added a fade-in class, there's no positioning setup to make elements slide left/right.
3. You're not preparing the next element properly before triggering its animation, which causes conflicts with the fade-out.

Fixing the CSS First #

First, update your styles to handle both opacity and position transitions, and make sure all content sections overlap in the same spot:

/* 基础样式：让所有内容容器重叠，确保切换时无布局跳动 */
.content-section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 1;
    transform: translateX(0);
    /* 明确指定过渡属性，涵盖透明度和位移 */
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

/* 当前页面：向左滑动并淡出 */
.fade-out-left {
    opacity: 0;
    transform: translateX(-100%);
}

/* 下一页：初始状态在右侧（透明），准备淡入 */
.fade-in-right {
    opacity: 0;
    transform: translateX(100%);
}

Updating the JavaScript Function #

Now adjust your JS to sync the animations properly—we'll show the next element first (off-screen), trigger the current element's fade-out, then trigger the next element's slide-in once the animation completes:

function fadeOutShowNext(currentId, nextId){
    const currentSection = document.getElementById(currentId);
    const nextSection = document.getElementById(nextId);

    // 先把下一页放到右侧并显示（但透明），为动画做准备
    nextSection.style.display = 'block';
    nextSection.classList.add('fade-in-right');

    // 触发当前页的左滑淡出动画
    currentSection.classList.add('fade-out-left');

    // 等待动画完成（和CSS过渡时间保持一致：1秒）
    setTimeout(() => {
        // 隐藏当前页并重置其动画类，方便下次切换
        currentSection.style.display = 'none';
        currentSection.classList.remove('fade-out-left');

        // 移除下一页的初始位移类，触发淡入动画
        nextSection.classList.remove('fade-in-right');
    }, 1000);
}

Key Notes to Remember #

• Positioning: Using position: absolute ensures all content sections stack on top of each other—if you're using a flex layout instead, you can wrap them in a container with overflow: hidden and adjust positioning accordingly.
• Transition Sync: Always match the setTimeout duration to your CSS transition time to avoid cutting animations short or showing unwanted delays.
• Class Reset: Removing the animation classes after each transition ensures the elements are back to their default state for the next cycle.

Give this setup a test—you should see the current page slide left and fade out while the next page slides in smoothly from the right. If you run into any layout quirks (like elements shifting), double-check that your parent container has position: relative so the absolute-positioned sections are anchored correctly.

备注：内容来源于stack exchange，提问作者Jex