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

您的密码字段没有平滑动画，因为它的移动是附加其他字段的结果。

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

JQuery / CSS：动画静态位置

1 个答案: