动画appendChild div高度javascript

问题描述

我已经编写了这段显示错误消息的代码，直到正确编写电子邮件为止。我想使消息平滑显示，并使用javascript或css或两者同时平滑地向上和向下推送其具有的元素（从0平滑高度到默认高度），但我不知道如何。我不知道自己的解释是否很好...

const email = document.querySelector('#email');

eventListeners();

function eventListeners() {
  email.addEventListener('keyup',validateEmail);
}

function validateEmail() {

  const email = document.querySelector('.email'),inputEmail = document.querySelector('#email'),formatEmail = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  if (inputEmail.value.match(formatEmail)) {
    email.removeChild(document.querySelector('.error'));
  } else {
    if (!document.querySelector('.error')) {
      const errorMessage = document.createElement('div');
      errorMessage.setAttribute('class','error');
      errorMessage.innerHTML = `<div class="showerror"><p>error</p></div>`;
      email.appendChild(errorMessage);
    } else if (inputEmail.value === "") {
      email.removeChild(document.querySelector('.error'));
    }
  }
}

.error {
  border: 1px solid black;
  width: 200px;
  text-align: center;
 }

<div class="name">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" placeholder="Name">
</div>
<div class="email">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="Email">
</div>
<div class="password">
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" placeholder="Password">
</div>

解决方法

使用类似CSS的过渡

    * {
-webkit-transition: all ease-in-out 0.5s;
-moz-transition: all ease-in-out 0.5s;
-ms-transition: all ease-in-out 0.5s;
-o-transition: all ease-in-out 0.5s;
transition: all ease-in-out 0.5s;
}

此示例适用于所有元素。如果只需要一个，最好编写特定选择器instea的“ *”。

您可以使用不同的延迟和动画样式来修改效果，有关w3schools的更多信息，请参见： https://www.w3schools.com/css/css3_transitions.asp

,

这是具有建议的修改的新代码，但是现在错误内容仍然存在。我怎么删除它？

const email = document.querySelector('#email');

eventListeners();

function eventListeners() {
  email.addEventListener('keyup',validateEmail);
}

function validateEmail() {

  const email = document.querySelector('.email'),error = document.querySelector('.error'),inputEmail = document.querySelector('#email'),formatEmail = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

  if (inputEmail.value.match(formatEmail)) {
    error.classList.remove("show-error")
  } else {
    if (inputEmail.value !== "") {
      error.innerHTML = `<p>error</p>`;
      error.classList.add("show-error")
    } else {
      error.classList.remove("show-error")
    }
  }
}

.error {
  width: 200px;
  max-height: 0;
  transition: max-height 1s ease-out;
  overflow: hidden;
  background: #d5d5d5;
  text-align: center;
}

.show-error {
  max-height: 100px;
  transition: max-height 1s ease-in;
}

<div class="name">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" placeholder="Name">
</div>
<div class="email">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="Email">
  <div class="error"></div>
</div>
<div class="password">
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" placeholder="Password">
</div>