JQuery/CSS：動畫靜態位置

Question

我試圖從一種表單字段類型轉換爲另一種。如果我插入另一個<input>元素，則下一個元素的靜態位置不會生成動畫。

$("#switchlogin").click(function() { 
 
    //Create the label element 
 
    var emaillabel = $("<label>").text("Email").attr("for", "email"); 
 
    //Create the input element 
 
    var emailinput = $('<input type="text">').attr({ 
 
    id: "email", 
 
    name: "email" 
 
    }); 
 

 
    //Create the label element 
 
    var pwdlabel = $("<label>").text("Repeat Password").attr("for", "password-wh"); 
 
    //Create the input element 
 
    var pwdinput = $('<input type="password">').attr({ 
 
    id: "password-wh", 
 
    name: "password-wh" 
 
    }); 
 

 
    $("#username-field").after(emaillabel); 
 
    emaillabel.after(emailinput); 
 

 
    $("#password-field").after(pwdlabel); 
 
    pwdlabel.after(pwdinput); 
 
});

input { 
 
    border: solid #e3e3e3 1pt; 
 
    display: block; 
 
    margin-bottom: 1em; 
 
    font-size: 14pt; 
 
    opacity: 0; 
 
    animation: fadeIn .3s forwards; 
 
} 
 
label { 
 
    opacity: 0; 
 
    animation: fadeIn .3s forwards; 
 
} 
 
@keyframes fadeIn { 
 
    to { 
 
    opacity: 1; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form action="<?php the_permalink(); ?>" id="login" method="post"> 
 
    <div id="username-field"> 
 
    <label for="username">Username</label> 
 
    <input type="text" id="username" name="username"> 
 
    </div> 
 

 
    <div id="password-field"> 
 
    <label for="password">Password</label> 
 
    <input type="password" id="password" name="password"> 
 
    </div> 
 

 
    <div id="buttons-field"> 
 
    <button type="submit">Login</button> 
 
    <a href="#" id="switchlogin">Register</a> 
 
    </div> 
 
</form>

https://jsfiddle.net/fpvctpjs/2/

所以，我想那是什麼，按註冊鏈接時，該password-field向下移動順暢，使地方的新元素。

我嘗試了幾件事情，如加入margin-top,position:absolute或position:relative，但不知何故我不能得到它的工作。

感謝你的幫助，
marsman

Answer 1

您的密碼字段不順暢動畫，因爲它的運動是被附加在其他領域的結果。

什麼是最好的是讓其他領域總是在那裏，但隱藏在一個div高度爲0; - 然後當你點擊重置按鈕，動畫到該div的期望高度和淡入孩子的投入。