Html 引导模式高度上的转换不'；行不通

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

忘记密码表单的高度比登录表单低75px，因此模式会调整大小。不过，这相当直白，所以我想在模态高度上应用CSS转换，以使调整大小更加平滑

可悲的是，我尝试过的所有事情都不起作用。我尝试在.modal类和.modal对话框上设置转换属性；我试着将转换设置为！重要的。我甚至尝试使用jQuery动画进行转换，但当我这样做时，模态首先调整大小，然后使用jQuery动画进一步收缩/增长，然后跳回到“良好”高度，因此这也不起作用

有选择吗

（编辑）

HTML:

Nvm，找到了

jQuery：

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

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

$(".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：

---

请向我们展示您迄今为止所做的工作。请创建您的代码并与我们共享。不知道代码是否有帮助，但在这里您需要CSS转换的开始和结束值，否则将无法工作（如果模态具有高度自动）。@GermanoPlebani谢谢，这很有帮助！

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

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

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

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

    &.short {
        height: 340px;
    }
}