Question

我已经创建了一个注册/登录表单。为此，我创建了一个动画以在两者之间切换。但是，我的动画中有一个错误，我找不到原因。

这是代码：

HTML：

<main>
  <div class="wrapper">
    <div class="message signup-message">
      <h1>Welcome to website!</h1>
      <h4>Get started immediately by creating an account below!</h4>
    </div>
    <div class="message login-message">
      <h1>Welcome back!</h1>
      <h4>Log in below!</h4>
    </div>
    <form class="form signup-form" action="includes/signup.inc.php" method="post">
      <div class="form-group">
        <input type="text" name="first-signup" required autocomplete="off">
        <label>
          First name<span class="req">*</span>
        </label>
      </div>
      <div class="form-group">
        <input type="text" name="last-signup" required autocomplete="off">
        <label>
          Last name<span class="req">*</span>
        </label>
      </div>
      <div class="form-group">
        <input type="text" name="uid-signup" required autocomplete="off">
        <label>
          Username<span class="req">*</span>
        </label>
      </div>
      <div class="form-group">
        <input type="text" name="email-signup" required autocomplete="off">
        <label>
          E-mail<span class="req">*</span>
        </label>
      </div>
      <div class="form-group">
        <input type="password" name="pwd-signup" required autocomplete="off">
        <label>
          Password<span class="req">*</span>
        </label>
      </div>
      <div class="form-group">
        <input type="password" name="pwd-repeat-signup" required autocomplete="off">
        <label>
          Repeat password<span class="req">*</span>
        </label>
      </div>
      <div class="spec form-group">
        <span>Already have an account? </span><a href="#" onclick="toggle_login_signup()">Login</a>
      </div>
      <div class="form-group">
        <button type="submit" name="submit-signup">sign up <i class="fas fa-caret-right"></i></button>
      </div>
    </form>
    <form class="form login-form" action="includes/login.inc.php" method="post">
      <div class="form-group">
        <input type="text" name="uid-login" required autocomplete="off">
        <label>
          Username/E-mail<span class="req">*</span>
        </label>
      </div>
      <div class="form-group">
        <input type="text" name="pwd-login" required autocomplete="off">
        <label>
          Password<span class="req">*</span>
        </label>
      </div>
      <div class="spec form-group">
        <input type="checkbox" name="remember-me"> Remember me<br>
        <a href="#">Forgot your password?</a><br>
        <span>No account? </span><a href="#" onclick="toggle_login_signup()">Sign up</a>
      </div>
      <div class="form-group">
        <button type="submit" name="submit-signup">Login <i class="fas fa-caret-right"></i></button>
      </div>
    </form>
  </div>
</main>

CSS：

@keyframes hide {
  from{
    left:50%;
    opacity: 1;
    visibility: visible;
  }

  to{
    left: 20%;
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes show {
  from{
    left:90%;
    opacity: 0;
    visibility: hidden;
  }

  to{
    left:50%;
    opacity: 1;
    visibility: visible;
  }
}

JS：

let toggle_login = false;
let toggle_login_signup = function(){

  let login_form = document.querySelector(".login-form");
  let signup_form = document.querySelector(".signup-form");
  let login_msg = document.querySelector(".login-message");
  let signup_msg = document.querySelector(".signup-message");

  if (toggle_login === false) {
    signup_form.style.animation = "hide .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards";
    signup_msg.style.animation = "hide .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards";
    login_form.style.animation = "show .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards .3s";
    login_msg.style.animation = "show .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards .3s";

    toggle_login = true;
  }
  else {
    login_form.style.animation = "hide .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards";
    signup_form.style.animation = "show .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards .3s";
    login_msg.style.animation = "hide .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards";
    signup_msg.style.animation = "show .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards .3s";

    toggle_login = false;
  }

}

https://codepen.io/becckman/pen/XorEdJ

如您所见，动画出现之前，注册表单会出现一秒钟。你能找到原因吗？提前致谢！：）

Answer 1

好的，它已经完成了。这与如何调用js中的类有关。

请参阅下文。

    let toggle_login = false;
let toggle_login_signup = function(){

  let login_form = document.querySelector(".login-form");
  let signup_form = document.querySelector(".signup-form");
  let login_msg = document.querySelector(".login-message");
  let signup_msg = document.querySelector(".signup-message");

    if (!toggle_login) {

    signup_form.style.animation = "hide .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards";
    signup_msg.style.animation = "hide .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards";

            login_form.style.animation = "show .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards .3s";
    login_msg.style.animation = "show .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards .3s";



    toggle_login = true;
  }
  else {
    login_form.style.animation = "hide .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards";
    login_msg.style.animation = "hide .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards";
              signup_form.style.animation = "show .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) both .5s";
             signup_msg.style.animation = "show .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) both .5s";   



    toggle_login = false;
  }

}

越野车的行为是，因为animation-fill-mode值。

使用both，以便可以将第一个和最后一个关键帧值应用于该元素。

现在没有这种错误的行为。很高兴提供帮助；）

CSS动画错误

1 个答案: