Question

我正在使用Bootstrap（v3）模式作为登录屏幕。登录屏幕包含一个“忘记密码”按钮，该按钮隐藏主登录表单并使用简单的jQuery显示忘记的密码表单。

忘记密码表单比登录表单高75px，因此模式调整大小。然而，它是直截了当的，所以我想在模态高度上应用CSS过渡，以使调整更加平滑。

可悲的是，我尝试过的任何事情都没有奏效。我尝试在.modal类和.modal-dialog上设置transition属性;我尝试将过渡设置为！important。我甚至尝试使用jQuery动画进行过渡，但是当我这样做时，模态首先调整大小，然后使用jQuery动画进一步缩小/增长，然后跳回到“好”高度，这样就不起作用了

任何选项？

（编辑）

HTML：

    <div class="modal fade" id="login" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h3 class="modal-title">Login</h3>
                </div>
                <div class="modal-body">
                    <div class="default">
                        <h2>Welcome back!</h2>

                        <div class="form">
                            <form id="loginform" method="post" action="php/login-processor.php">
                                <input type="email" name="email" placeholder="Email" />
                                <input type="password" name="password" placeholder="Password" />
                                <input type="submit" value="Log in" class="button button-red" />
                            </form>
                        </div>

                        <p class="link" id="topass">I forgot my password</p>
                    </div>

                    <div class="forgotpass hidden">
                        <h2>Request a new password</h2>

                        <div class="form">
                            <form id="passforgottenform" method="post" action="php/password-forgotten-processor.php">
                                <input type="email" name="email-forgot-password" placeholder="Enter your email address" />
                                <input type="submit" value="Request" class="button button-red" />
                            </form>
                        </div>

                        <p class="link" id="back">&lt; Back to the login screen</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

jQuery的：

$("#topass").click(function(){
    $(".default").addClass("hidden");
    $(".forgotpass").removeClass("hidden");
});

$("#back").click(function(){
    $(".default").removeClass("hidden");
    $(".forgotpass").addClass("hidden");
});

Answer 1

Nvm，想通了。

jQuery的：

$(".forgotpass").hide();

$("#topass").click(function(){
    $(".default").hide();
    $(".forgotpass").fadeIn();
    $(".modal-content").addClass("short");
});

$("#back").click(function(){
    $(".forgotpass").hide();
    $(".default").fadeIn();
    $(".modal-content").removeClass("short");
});

SCSS：

.modal-content {
    height: 415px;
    transition: height 0.3s cubic-bezier(.25,.8,.25,1);

    &.short {
        height: 340px;
    }
}

自举模态高度的转换不起作用

1 个答案: