点击导航栏重启Logo动画报错：removeClass is not a function求助

问题核心 #

你碰到的TypeError: home.removeClass is not a function错误，本质是**removeClass()和addClass()是jQuery的专属方法**，但你用原生JS获取的DOM元素（document.getElementById返回的对象）不支持这些方法。另外还有几个细节问题导致动画没效果：

• CSS定义的类是.home-animation，但JS里操作的是logo-animation，类名完全不匹配
• 你把动画类加在了<header id="home">上，但实际动画应该作用在.logo元素上
• 锚点链接的默认跳转行为会干扰动画触发逻辑

修复步骤 #

1. 用原生classList API替代jQuery方法：原生DOM元素靠classList.add()、classList.remove()来操作类
2. 统一类名：把CSS和JS里的动画类名保持一致（比如都用logo-animation）
3. 定位正确的动画元素：获取.logo元素而非header元素来控制动画
4. 阻止锚点默认行为：点击Home按钮时先阻止页面跳转，避免动画被打断

完整修复代码 #

JavaScript

const homeButton = document.getElementById('li-home');
// 获取实际承载动画的logo元素
const logo = document.querySelector('.logo');

function refreshHome(e) {
    // 阻止锚点默认跳转行为，避免干扰动画
    e.preventDefault();
    
    // 先移除动画类，再通过短暂延迟重新添加（强制触发动画重启）
    logo.classList.remove('logo-animation');
    setTimeout(() => {
        logo.classList.add('logo-animation');
    }, 10);
    
    // 动画结束后自动移除类（和CSS动画时长1.2s对应）
    setTimeout(() => {
        logo.classList.remove('logo-animation');
    }, 1200);
}

homeButton.addEventListener('click', refreshHome);

CSS

/* 统一类名为logo-animation，和JS逻辑对应 */
.logo-animation {
    animation: tracking-in-contract 1.2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

/* 补充动画关键帧定义（如果之前没添加的话） */
@keyframes tracking-in-contract {
    0% {
        letter-spacing: 1em;
        opacity: 0;
    }
    40% {
        opacity: 0.6;
    }
    100% {
        letter-spacing: normal;
        opacity: 1;
    }
}

HTML

<header id="home">
    <div class="logo" data-glitch="Soccmai">
        <div class="glitch-bloc">
            <p class="invisible-text">{ soccmai }</p>
            <p class="glitchedAnim">{ soccmai }</p>
            <p class="glitchedAnim">{ soccmai }</p>
            <p class="glitchedAnim">{ soccmai }</p>
        </div>
    </div>
    <div class="underLogo">
        <h2>Web Developer | Graphic Designer</h2>
    </div>
</header>
<nav>
    <ul>
        <li><a href='#home' id="li-home">Home</a></li>
        <li><a href='#about-me'>About Me</a></li>
        <li>Projects</li>
        <li>Skills</li>
        <li>Contact</li>
    </ul>
</nav>

额外说明 #

• 加setTimeout(() => { logo.classList.add('logo-animation'); }, 10)是因为：如果直接移除后立即添加，浏览器可能来不及渲染DOM变化，导致动画不重启，短暂延迟能让DOM更新生效。
• 如果需要点击后依然跳转到Home锚点，可以在动画结束后手动执行window.scrollTo({ top: 0, behavior: 'smooth' })实现平滑滚动。

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