登录页面无法正确转换

问题描述 投票：0回答：1

我制作了一个标准的登录页面，当您尝试注册时应该会滑过，除了当我单击注册时没有任何反应，我的 JS 链接正确，我的 CSS 似乎也很好，并且没有错误显示在控制台登录chrome。登录页面(https://i.sstatic.net/3qVc8XlD.png)

相关代码如下：

document.addEventListener('DOMContentLoaded', function() {
    const signUpButton = document.getElementById('signUp');
    const signInButton = document.getElementById('signIn');
    const main = document.getElementById('main');

    signUpButton.addEventListener('click', () => {
        main.classList.add('right-panel-active');
    });
    signInButton.addEventListener('click', () => {
        main.classList.remove('right-panel-active');
    });
});
.container .right-panel-active .sign-in{
    transform: translateX(100%);
}

.container .right-panel-active .sign-up{
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
}

.overlay-container{
    position: absolute; 
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: transform 0.6s ease-in-out;
    z-index: 100;
}

.container .right-panel-active .overlay-container{
    transform: translateX(-100%);
}

.overlay{
    position: relative;
    color: #ffff;
    background: #ff416c;
    left: -100%;
    height: 100%;
    width: 200%;
    background: linear-gradient(to right,#ff4b28,#ff228c);
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.container .right-panel-active .overlay{
    transform: translateX(50%);
}

.overlay-left, .overlay-right{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    text-align: center;
    top: 0;
    height: 100%;
    width: 50%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.overlay-left{
    transform: translateX(-20%);
}

.overlay-right{
    right: 0;
    transform: translateX(0);
}

.container .right-panel-active .overlay-left{
    transform: translateX(0);
}

.container .right-panel-active .overlay-right{
    transform: translateX(20%);
}
 

   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial- 
scale=1.0">
    <title>Login Form</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container" id="main">
        <div class="sign-up">
            <form action="#">
                <h1>Create Account</h1>
                <p>or use your email for registration</p>
                <input type="text" name="txt" placeholder="Name" 
required="">
                <input type="email" name="email" 
placeholder="Email" required="">
                <input type="password" name="pswd" 
placeholder="Password" required="">
                <input type="number" name="phone" 
placeholder="Phone Number" required="">
                <button type="button">Sign Up</button>
            </form>
        </div>
        <div class="sign-in">
            <form action="#">
                <h1>Sign In</h1>
                <p>or use your account</p>
                <input type="text" name="txt" placeholder="Name" 
 required="">
                <input type="password" name="pswd" 
 placeholder="Password" required="">
                <button>Sign In</button>
            </form>
        </div>
        <div class="overlay-container">
            <div class="overlay">
                <div class="overlay-left">
                    <h1>Welcome Back!</h1>
                    <p>To stay connected with us, please login 
 with your personal info</p>
                    <button id="signIn">Sign In</button>
                </div>
                <div class="overlay-right">
                    <h1>Hello Friend!</h1>
                    <p>Enter your personal details and start 
  your journey with us</p>
                    <button id="signUp">Sign Up</button>
                </div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

我检查了控制台中的错误，没有任何错误

javascript html css
1个回答
0
投票

document.addEventListener('DOMContentLoaded', function() {
    const signUpButton = document.getElementById('signUp');
    const signInButton = document.getElementById('signIn');
    const main = document.getElementById('main');

    signUpButton.addEventListener('click', () => {
        main.classList.add('right-panel-active');
    });
    signInButton.addEventListener('click', () => {
        main.classList.remove('right-panel-active');
    });
});
.container .right-panel-active .sign-in{
    transform: translateX(100%);
}

.container .right-panel-active .sign-up{
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
}

.overlay-container{
    position: absolute; 
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: transform 0.6s ease-in-out;
    z-index: 100;
}

.container .right-panel-active .overlay-container{
    transform: translateX(-100%);
}

.overlay{
    position: relative;
    color: #ffff;
    background: #ff416c;
    left: -100%;
    height: 100%;
    width: 200%;
    background: linear-gradient(to right,#ff4b28,#ff228c);
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.container .right-panel-active .overlay{
    transform: translateX(50%);
}

.overlay-left, .overlay-right{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    text-align: center;
    top: 0;
    height: 100%;
    width: 50%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.overlay-left{
    transform: translateX(-20%);
}

.overlay-right{
    right: 0;
    transform: translateX(0);
}

.container .right-panel-active .overlay-left{
    transform: translateX(0);
}

.container .right-panel-active .overlay-right{
    transform: translateX(20%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="container">
  <div id="main">
    <div class="overlay-container">
      <div class="overlay right-panel-active">
          <div class="overlay-left">
              <h1>Welcome Back!</h1>
              <p>To stay connected with us, please login with your personal info</p>
              <button id="signIn">Sign In</button>
          </div>
          <div class="overlay-right">
              <h1>Hello Friend!</h1>
              <p>Enter your personal details and start your journey with us</p>
              <button id="signUp">Sign Up</button>
          </div>
      </div>
    </div>
  </div>  
</div>

document.addEventListener('DOMContentLoaded', function() {
  const signUpButton = document.getElementById('signUp');
  const signInButton = document.getElementById('signIn');
  const main = document.getElementById('main');

  signUpButton.addEventListener('click', () => {
    main.classList.add('right-panel-active');
  });
  signInButton.addEventListener('click', () => {
    main.classList.remove('right-panel-active');
  });
});
.container .right-panel-active .sign-in {
  transform: translateX(100%);
}

.container .right-panel-active .sign-up {
  transform: translateX(100%);
  opacity: 1;
  z-index: 5;
}

.overlay-container {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: transform 0.6s ease-in-out;
  z-index: 100;
}

.container .right-panel-active .overlay-container {
  transform: translateX(-100%);
}

.overlay {
  position: relative;
  color: #ffff;
  background: #ff416c;
  left: -100%;
  height: 100%;
  width: 200%;
  background: linear-gradient(to right, #ff4b28, #ff228c);
  transform: translateX(0);
  transition: transform 0.6s ease-in-out;
}

.container .right-panel-active .overlay {
  transform: translateX(50%);
}

.overlay-left,
.overlay-right {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 40px;
  text-align: center;
  top: 0;
  height: 100%;
  width: 50%;
  transform: translateX(0);
  transition: transform 0.6s ease-in-out;
}

.overlay-left {
  transform: translateX(-20%);
}

.overlay-right {
  right: 0;
  transform: translateX(0);
}

.container .right-panel-active .overlay-left {
  transform: translateX(0);
}

.container .right-panel-active .overlay-right {
  transform: translateX(20%);
}
<div class="main">
    <div class="overlay-container">
  <div class="overlay">
    <div class="overlay-left">
      <h1>Welcome Back!</h1>
      <p>To stay connected with us, please login with your personal info</p>
      <button id="signIn">Sign In</button>
    </div>
    <div class="overlay-right">
      <h1>Hello Friend!</h1>
      <p>Enter your personal details and start your journey with us</p>
      <button id="signUp">Sign Up</button>
    </div>
  </div>
</div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.