在动画中使用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 (将#修改为@）