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的期望高度和淡入孩子的投入。