Блог

Главная - Вопросы по программированию - Анимировать высоту дочернего элемента приложения javascript

Анимировать высоту дочернего элемента приложения javascript

#javascript #html #css #transition #appendchild

#javascript #HTML #css #переход #дочерний элемент приложения

Вопрос:

Я написал этот код, который показывает сообщение об ошибке, пока электронное письмо не будет написано правильно. Я хотел бы сделать так, чтобы сообщение отображалось плавно, и также плавно перемещать элементы, которые в нем есть, вверх и вниз (плавная высота от 0 до высоты по умолчанию) с помощью javascript или css или обоих, но я не знаю как. Я не знаю, хорошо ли я объясняю себя…

 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>

Ответ №1:

Используйте переходы 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

Комментарии:

1. Я полагаю, что это должно быть сделано с помощью переходов, и я знаю, как работают переходы, но я не знаю, как применить это в конкретном случае, который я показываю. Я был бы очень признателен, если бы вы могли мне помочь.

2. В этом случае я бы на самом деле предложил добавить ошибку div в html и установить его высоту в 0, затем в вашей функции JS вместо создания элемента заполните его содержимым и увеличьте высоту.

3. Привет, Мари, я переписываю код с предложенными изменениями, и он работает, но теперь содержимое ошибки остается. Как я мог его удалить?

4. Вы можете настроить таргетинг на свой div с ошибкой с помощью javascript и переключить содержимое с помощью функции innerHTML

Ответ №2:

Это новый код с предлагаемыми изменениями, но теперь содержимое ошибки остается. Как я мог его удалить?

 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}.[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>