Переход на bootstrap modal height не работает

Question

Я использую Bootstrap (v3) в качестве экрана входа в систему. Экран входа в систему содержит кнопку «забытый пароль», которая скрывает основную форму входа и показывает забытую форму пароля, используя простой jQuery.

Забытая форма пароля на 75 пикселей меньше, чем форма входа в систему, поэтому модальные размеры. Он делает это довольно откровенно, однако, поэтому я хотел применить переход 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; 
    } 
}