引导模态高度上的转换不起作用

Posted 2023-03-06

【中文标题】引导模态高度上的转换不起作用

【英文标题】：Transition on bootstrap modal height doesn't work

【发布时间】：2017-04-04 19:05:31

【问题描述】：

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

忘记密码表单比登录表单高 75 像素，因此模式会调整大小。然而，这样做相当直接，所以我想在模态高度上应用 CSS 过渡，以使调整大小更加平滑。

遗憾的是，我尝试过的所有方法都没有奏效。我尝试在 .modal 类和 .modal-dialog 上设置过渡属性；我尝试将过渡设置为！important。我什至尝试使用 jQuery animate 进行转换，但是当我这样做时，模态首先调整大小，然后使用 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");
);

【问题讨论】：

请告诉我们你到目前为止做了什么。

请创建您的代码并与我们分享。

不知道代码是否有帮助，但你在这里

CSS 过渡需要 start 和 final 值否则不起作用（如果模态具有自动高度）。

@GermanoPlebani 谢谢，有帮助！

【参考方案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;