新手求助：如何将表单切换的jQuery代码转换为原生JavaScript？

针对你的需求，我们可以用CSS过渡+原生DOM操作替代jQuery的动画逻辑，既符合学校要求，又能实现相同的切换效果，且性能更优。

1. 添加CSS过渡样式 #

先给表单设置过渡动画，模拟jQuery的slow（约600ms）动画效果，同时定义初始显示状态：

/* 给所有表单添加过渡基础样式 */
.form form {
  overflow: hidden; /* 隐藏超出部分，避免内容溢出 */
  opacity: 0;
  height: 0;
  /* 绑定高度和透明度的过渡动画 */
  transition: height 0.6s ease, opacity 0.6s ease;
}

/* 默认显示登录表单 */
.form .login-form {
  height: auto;
  opacity: 1;
}

2. 原生JavaScript实现切换逻辑 #

用原生DOM API替代jQuery的事件绑定和动画逻辑：

// 获取所有切换链接（"Sign In"和"Create an account"）
const toggleLinks = document.querySelectorAll('.message a');

// 给每个链接绑定点击事件
toggleLinks.forEach(link => {
  link.addEventListener('click', function(event) {
    // 阻止a标签默认跳转行为（避免点击后跳转到页面顶部）
    event.preventDefault();
    
    // 获取两个表单元素
    const loginForm = document.querySelector('.login-form');
    const registerForm = document.querySelector('.register-form');
    
    // 判断当前登录表单的显示状态，切换两个表单的显示/隐藏
    const isLoginVisible = loginForm.style.height !== '0px' && loginForm.style.opacity === '1';
    
    if (isLoginVisible) {
      // 隐藏登录表单，展开注册表单
      loginForm.style.height = '0px';
      loginForm.style.opacity = '0';
      // 用scrollHeight获取注册表单实际内容高度，实现平滑展开
      registerForm.style.height = registerForm.scrollHeight + 'px';
      registerForm.style.opacity = '1';
    } else {
      // 隐藏注册表单，展开登录表单
      registerForm.style.height = '0px';
      registerForm.style.opacity = '0';
      loginForm.style.height = loginForm.scrollHeight + 'px';
      loginForm.style.opacity = '1';
    }
  });
});

关键细节说明 #

• querySelectorAll/querySelector是原生JS的选择器方法，对应jQuery的$()选择器，前者获取所有匹配元素，后者获取第一个匹配元素。
• addEventListener用于绑定点击事件，替代jQuery的click()方法。
• scrollHeight用来获取表单的实际内容高度，解决height:auto无法过渡的问题，实现和jQueryanimate一致的平滑高度变化。
• 过渡时间0.6s和jQuery的slow参数（默认600ms）一致，保证动画速度相同。

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