CSS动画错误

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;
}
}

错误的行为是，因为动画填充模式值。

使用both，因此它可以应用第一个&元素的最后一个关键帧值。

现在已经没有这样的错误行为了。很乐意帮忙；(