移动端汉堡菜单导航链接打开时动画触发异常问题咨询

问题根因 #

1. 状态不匹配：点击导航链接关闭菜单时，没有同步清空导航链接元素上的动画属性，导致后续打开菜单时的toggle判断逻辑异常，出现隔次才能触发动画的问题
2. 事件重复绑定：导航链接的点击关闭逻辑写在了汉堡图标的点击回调中，每次点击汉堡都会重复绑定点击事件，会造成额外的性能损耗

修复后JavaScript代码 #

const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');
    const navLinks = document.querySelectorAll('.nav-links li');
    const navigationItems = document.querySelectorAll('.nav-links a');

    // 导航链接点击关闭逻辑移到外部，避免重复绑定
    navigationItems.forEach((navigationItem) => {
        navigationItem.addEventListener("click", () => {
            nav.classList.remove('nav-active');
            burger.classList.remove('toggle');
            // 关闭菜单时清空所有链接的动画属性，重置透明度为初始状态
            navLinks.forEach(link => {
                link.style.animation = '';
                link.style.opacity = 0;
            });
        });
    });

    burger.addEventListener('click', () => {
        const isOpened = nav.classList.toggle('nav-active');
        burger.classList.toggle('toggle');
        
        navLinks.forEach((link, index) => {
            // 菜单打开时统一重新添加动画，关闭时清空
            if (isOpened) {
                // 先清空再赋值，强制触发动画重绘
                link.style.animation = '';
                // 强制浏览器重排，避免动画不生效
                void link.offsetWidth;
                link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
            } else {
                link.style.animation = '';
                link.style.opacity = 0;
            }
        });
    });
}
navSlide();

核心修改说明 #

• 把导航链接的关闭事件绑定移到汉堡点击回调外部，避免重复绑定
• 关闭菜单时统一清空导航链接的动画属性，重置透明度和初始状态保持一致
• 打开菜单时先清空动画属性，触发重排后重新赋值动画，保证每次打开都能触发动画
• 去掉了原有的if/else toggle逻辑，改为根据菜单打开状态直接处理，避免状态不一致的问题

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