如何解决在动画中使用animate.css幻灯片时,表单会失去其背景色
在我的程序中,我可以尝试创建注册表单和登录表单。有一个按钮可以在登录和注册表单之间切换。我似乎遇到的问题是,这些表单最初使用z-index
属性彼此重叠。举例来说,假设将登录表单切换为注册表单,则登录表单会在动画中滑动,然后不显示任何内容,以使其看起来像已移开。盒子滑出后,另一个表单将在动画上进行滑动,即使它实际上与登录表单位于同一位置。问题在于,一旦完成动画中的幻灯片操作,注册表单就将自己粘贴在比登录表单更高的y轴上。
这是HTML:
<div id="main_container">
<form id="login_form" class="form-horizontal bg-secondary animate__animated" action="javascript:void(0);">
<div class="row">
<div class="row form-group" style="position:relative; left:10%;">
<label class="temporary control-label">Name:</label>
<input id="login_name_input" class="form-control" type = "text" required maxlength="40" placeholder="username">
</div>
<div class="row form-group" style="position: relative; left: 10%">
<label class="temporary control-label">Password:</label>
<input id="login_password_input" class="form-control" type = "password" required maxlength="40" placeholder="password">
<button id="login_alter_button" type="button" style="position: relative; bottom: 35%; left: 100%; height: 40px;"><i class="fas fa-eye-slash"></i></button>
</div>
<div class="row form-group">
<button class="btn btn-info" id="login_submit_button" style="margin: 40px; position: relative; top: 50%; right:130%;">login <i class="fas fa-door-open" style="font-size: 48px;"></i></button>
</div>
<div class="row">
<button class="btn btn-primary" id="switch_signup_button" type="button" style="position: relative; left: 207%; font-size: 15px; height: 30px;">switch to signup <i class="fas fa-sign-in-alt"></i></button>
</div>
</div>
</form>
<form id="signup_form" class="form-horizontal bg-primary animate__animated" action="javascript:void(0);">
<div class="row">
<div class="row form-group" style="position:relative; left:10%;">
<label class="temporary control-label">Name:</label>
<input id="signup_name_input" class="form-control" type = "text" required maxlength="40" placeholder="username">
</div>
<div class="row form-group" style="position: relative; left: 10%">
<label class="temporary control-label">Password:</label>
<input id="signup_password_input" class="form-control" type = "password" required maxlength="40" placeholder="password">
<button id="signup_alter_button" type="button" style="position: relative; bottom: 35%; left: 100%; height: 40px;"><i class="fas fa-eye-slash"></i></button>
</div>
<div class="row form-group">
<button class="btn btn-info" id="signup_submit_button" style="margin: 40px; position: relative; top: 50%; right:130%;">signup <i class="fas fa-user-plus" style="font-size: 48px;"></i></button>
</div>
<div class="row">
<button class="btn btn-secondary" id="switch_login_button" type="button" style="position: relative; left: 243%; font-size: 15px; height: 30px;">switch to login <i class="fas fa-sign-in-alt"></i></button>
</div>
</div>
</form>
</div>
这是JavaScript:
var login_form = document.getElementById("login_form");
var signup_form = document.getElementById("signup_form");
var switch_signup_button = document.getElementById("switch_signup_button");
var switch_login_button = document.getElementById("switch_login_button");
switch_signup_button.onclick = function()
{
login_form.classList.add("animate__backOutRight");
login_form.classList.remove("animate__backInLeft");
setTimeout(function()
{
login_form.style.display = "none";
},500);
signup_form.style.display = "block";
signup_form.classList.add("animate__backInLeft");
signup_form.classList.remove("animate__backOutRight");
}
switch_login_button.onclick = function()
{
signup_form.classList.add("animate__backOutRight");
signup_form.classList.remove("animate__backInLeft");
setTimeout(function()
{
signup_form.style.display = "none";
},500);
login_form.style.display = "block";
login_form.classList.add("animate__backInLeft");
login_form.classList.remove("animate__backOutRight");
}
这是这两种形式的CSS:
#login_form
{
font-size: large;
font-family: Rockwell;
display: block;
position: relative;
}
#signup_form
{
font-size: large;
font-family: Rockwell;
position: absolute;
z-index: -1;
display: none;
bottom: 5%; /*This line is needed or they end up on top of each other in a "display: block like structure"*/
}
使用底部图,注册表单会滑到底部所示的正确位置,但随后会立即跳到顶部。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。