侧边栏文本无法依次展示且重叠问题求助

问题根源 #

1. 文本重叠：所有.projects元素采用position: fixed且统一设置top: 60px，导致所有链接堆叠在同一位置。
2. 动画未依次触发：forEach循环中所有setTimeout使用相同延迟，文本动画同时执行；且document.querySelector('.animate3')仅选中第一个匹配元素，后续元素的动画状态未正确激活。
3. 关闭动画同理：侧边栏关闭时，同样存在querySelector仅选中第一个元素、无依次延迟的问题。

修改后的代码 #

CSS 调整 #

核心是修复链接定位，让列表自然排列：

.projectLinks {
    width: 200px;
    position: fixed;
    color: white;
    list-style: none;
    padding-left: 0;
    top: 60px; /* 统一控制列表整体位置 */
    left: -500px; /* 初始隐藏位置 */
}

.projects {
    text-decoration: none;
    color: inherit;
    font-size: 20px;
    font-family: sans-serif;
    position: relative; /* 改为相对定位，让列表自动换行 */
    display: block; /* 块级元素占满一行 */
    margin: 10px 0; /* 增加间距避免拥挤 */
    opacity: 0; /* 初始透明，配合淡入动画 */
    transition: opacity 0.3s ease; /* 平滑过渡效果 */
}

/* 保留原有侧边栏动画，调整链接容器的动画目标 */
@keyframes sidebarLinks1 {
    0% {
        left: -500px;
    }
    100% {
        left: 35px;
    }
}

@keyframes sidebarLinks2 {
    0% {
        left: 35px;
    }
    100% {
        left: -500px;
    }
}

JavaScript 调整 #

修复延迟逻辑，确保动画依次触发：

const sidebarBut = document.querySelector('.sideBarBut');
let openClose = false;
let animationInProgress = false;
const projectLinks = document.querySelector('.projectLinks');
const list = document.querySelectorAll('.projects');

sidebarBut.addEventListener('click', animate);

function animate(){
    if (animationInProgress) return;
    animationInProgress = true;
    const sidebar = document.getElementById('sidebar');
    
    if (!openClose) {
        // 侧边栏展开动画
        sidebar.classList.remove('animate2');
        sidebar.classList.add('animate1');
        sidebar.style.animationPlayState = "running";
        
        // 链接容器进入动画
        projectLinks.classList.remove('animate4');
        projectLinks.classList.add('animate3');
        projectLinks.style.animationPlayState = "running";
        
        // 每个链接依次淡入
        list.forEach((link, index) => {
            setTimeout(() => {
                link.style.opacity = '1';
            }, 100 + index * 150); // 每个链接延迟150ms递增
        });
        openClose = true;
    } else {
        // 侧边栏收起动画
        sidebar.classList.remove('animate1');
        sidebar.classList.add('animate2');
        sidebar.style.animationPlayState = "running";
        
        // 链接容器退出动画
        projectLinks.classList.remove('animate3');
        projectLinks.classList.add('animate4');
        projectLinks.style.animationPlayState = "running";
        
        // 每个链接依次淡出
        list.forEach((link, index) => {
            setTimeout(() => {
                link.style.opacity = '0';
            }, index * 150);
        });
        openClose = false;
    }

    // 延长锁定时间，匹配动画总时长
    setTimeout(() => {
        animationInProgress = false;
    }, 1000);
}

效果说明 #

• 链接改为相对定位后，列表自然排列，解决重叠问题。
• 通过index * 150设置递增延迟，实现文本依次显示/隐藏的效果。
• 直接操作元素自身的动画状态，避免querySelector仅选中第一个元素的Bug。
• 增加透明度过渡，让动画效果更平滑自然。

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