如何在ReactJS中制作滑动动画

Question

我开发了这个登录页面，在同一页面中有登录和注册部分，并且可以通过按钮点击过程通过滑动动画来显示。

当通过 JS 文件执行该过程时，会出现错误消息：无法读取

null 的属性（读取“addeventlistener”）

这是我正在寻找的结果：https://youtube.com/clip/Ugkx-j0vr45zTq9YzXk5u_5ehYQOUErJqIoX?si=wSkcpjI2u7ze-sPt

function Login() {
  return (
    <div className='login_container' id='container'>
      <div className='form-container sing-up'>
        <form>
          <h1>Create Account</h1>
          <div className='social-icons'>
            <i><Fas.FaGooglePlusG /></i>
            <i><Fas.FaFacebook /></i>
          </div>
          <span>O usa tu email para registrarte</span>
          <input type='text' placeholder='Nombre' />
          <input type='text' placeholder='Email' />
          <input type='text' placeholder='Password' />
          <button>Sign Up</button>
        </form>
      </div>
      <div className='form-container sing-in'>
        <form>
          <h1>Sign In </h1>
          <div className='social-icons'>
            <i><Fas.FaGooglePlusG /></i>
            <i><Fas.FaFacebook /></i>
          </div>
          <span>O usa tu email para registrarte</span>
          <input type='text' placeholder='Nombre' />
          <input type='text' placeholder='Email' />
          <input type='text' placeholder='Password' />
          <button>Sign In</button>
        </form>
      </div>
      <div className='toogle-container'>
        <div className='toogle'>
          <div className='toogle-panel toogle-left'>
            <h1>Welcome Back!</h1>
            <p>Enter your personal details to use all of site features</p>
            <button className='hidden' id='login'>Sign In</button>
          </div>
          <div className='toogle-panel toogle-right'>
            <h1>Hello!</h1>
            <p>Register with your personal email or social media </p>
            <button className='hidden' id='register'>Sign Up</button>
          </div>
        </div>
      </div>
      <script src='script.js'></script>
 </div>
  
  )
}

export default Login

const container = document.getElementById('container');
const registerBtn = document.getElementById('register');
const loginBtn = document.getElementById('login');


registerBtn.addEventListener('click', () =>{
    container.classList.add("active");
});

loginBtn.removeEventListener('click', ()=> {
    container.classList.remove("active");
});

Answer 1

要制作此类动画，您可能需要使用

useRef

和

classList.add()

。首先创建

ref

用于登录和注册

 const signInFormRef = useRef(null);
 const loginFormRef = useRef(null);

然后将

ref

分配给每个人

   {/* Sign In Form will be active by default*/}
    <form ref={signInFormRef} className={`form active`}>
    ...
    {/* Login Form */}
    <form ref={loginFormRef} className={`form`}>
    ...

之后为每个按钮创建一个

handler

。

  const handleLogInButton = () => {
     signInFormRef.current.classList.remove("active");
     loginFormRef.current.classList.add("active");
  }
  const handlesignUpButton = () => {
     signInFormRef.current.classList.add("active");
     loginFormRef.current.classList.remove("active");
  }

在 css 中添加一个具有所有属性的活动类。 但这将对两者应用相同的属性，因为要移动到相反的方向，您需要创建 2 个类

activelogin

和

activesignup

  const handleLogInButton = () => {
     signInFormRef.current.classList.remove("activesignup");
     loginFormRef.current.classList.add("activelogin");
  }
  const handlesignUpButton = () => {
     signInFormRef.current.classList.add("activesignup");
     loginFormRef.current.classList.remove("activelogin");
  }        

确保在

signup form

中进行此更改

   {/* Sign In Form will be active by default*/}
    <form ref={signInFormRef} className={`form activesignup`}>
    ...

希望这有帮助...