自舉模式高度上的轉換不起作用

-3

我使用Bootstrap（v3）模式作爲登錄屏幕。登錄屏幕包含一個「忘記密碼」按鈕，隱藏主登錄表單並使用簡單的jQuery顯示忘記的密碼錶單。自舉模式高度上的轉換不起作用

忘記密碼錶單比登錄表單高75px，因此模式調整大小。但是，它直截了當地說，所以我想在模態高度上應用CSS轉換以使調整更加平滑。

可悲的是，我嘗試過的所有東西都沒有工作。我嘗試在.modal類和.modal對話框上設置transition屬性;我試圖設置過渡到！重要。我甚至嘗試過使用jQuery動畫進行轉換，但是當我這樣做時，模式首先調整大小，然後使用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"); 
});

來源

2016-11-21 Rayo Verweij

請告訴我們你已經完成的工作。 – Aslam

請創建一個代碼小提琴並與我們分享。 –

不知道代碼是否有幫助，但在這裏你是 –

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

來源

2016-11-21 16:10:39

自舉模式高度上的轉換不起作用

回答

相關問題