时间戳

首页 > 解决方案 > 动画 appendChild div 高度 javascript

javascript - 动画 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}\.[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>

标签： javascripthtmlcsstransitionappendchild

解决方案

使用 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;
}

此示例适用于所有元素。如果您只需要一个，最好将特定的选择器写成 '*'。

您可以使用不同的延迟和动画样式修改效果，在 w3schools 上阅读更多内容： https ://www.w3schools.com/css/css3_transitions.asp

推荐阅读