JQuery/CSS:静态位置动画

JQuery/CSS: Animate static position

本文关键字：位置 动画 静态 CSS JQuery      更新时间：2023-09-26

我正在尝试从一种表单字段类型平滑过渡到另一种。但是，如果我插入另一个<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

您的密码字段无法顺利设置动画，因为它的移动是附加其他字段的结果。

最好是让其他字段始终存在，但隐藏在高度为0的div内部--然后，当您单击重置按钮时，将动画设置为该div所需的高度，并淡入子输入。

相关文章：