Übergang auf Modalität Bootstrap funktioniert nicht

Question

Ich benutze ein Bootstrap (v3) modal als Login-Bildschirm. Der Anmeldebildschirm enthält einen "Passwort vergessen" -Button, der das Hauptanmeldeformular verbirgt und das vergessene Passwortformular mit jQuery anzeigt.

Das vergessene Passwort-Formular ist 75px weniger groß als das Login-Formular, so dass die modalen Größen. Es tut dies jedoch ziemlich unverblümt, also wollte ich einen CSS-Übergang auf die modale Höhe anwenden, um die Größenänderung glatter zu machen.

Leider hat keines der Dinge, die ich versuchte, funktioniert. Ich habe versucht, die Transition-Eigenschaft für die .modal-Klasse und für .modal-dialog; Ich habe versucht, den Übergang zu wichtig zu machen. Ich habe sogar versucht, die Übergänge mit jQuery animate zu machen, aber wenn ich das mache, ändert sich zuerst die Größe des Modales, dann schrumpft/wächst er weiter mit der jQuery-Animation und springt dann zurück auf die "gute" Höhe, so dass das nicht so gut funktioniert .

Optionen?

(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, es herausgefunden.

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