ブートストラップモードの高さでの遷移が機能しません

Question

ログイン画面にブートストラップ（v3）モーダルを使用しています。ログイン画面には、メインログインフォームを隠し、シンプルなjQueryを使用して忘れたパスワードフォームを表示する「パスワードを忘れた」ボタンがあります。

忘れたパスワードの形式は、ログインフォームよりも75px低く、モーダルのサイズが変更されます。しかし、むしろ鈍いので、サイズ変更をよりスムーズにするために、モーダル高さにCSSトランジションを適用したかったのです。

悲しいことに、私が試したことはありませんでした。私は、.modalクラスと.modal-dialogにトランジションプロパティを設定しようとしました。私はトランジションを重要なものに設定しようとしました。私はjQueryアニメーションを使用してトランジションを試みていましたが、モーダルを最初にサイズ変更した後、jQueryアニメーションを使用してさらに縮小/拡大してから「良い」高さにジャンプします。 。

オプションはありますか？

（EDIT）

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; 
    } 
}