@Rhino__222

Как сделать плавное увеличение высоты блока при добавлении элемента?

Есть форма регистрации. В случае несовпадения паролей, в заранее созданный элемент записывается сообщение об ошибке и выводится пользователю на 3 секунды. После чего содержимое элемента очищается.

HTML:

<form name = "reg_form" id="form" action="index.php" method="POST">
			  <div id="container" class="container">
			    <h1>Регистрация</h1>
			    <hr>

			    <label><b>Логин</b></label>
			    <input type="text" name="login" required>

			    <label><b>Email</b></label>
			    <input type="email" name="email" id="email" required>

			    <label><b>Пароль</b></label>
			    <input type="password" name="psw" id="psw" >

			    <label><b>Повтор пароля</b></label>
			    <input type="password" name="psw_repeat" id="psw_repeat" required>
			    <p id="pas_errors" class="pas_errors"></p>
			    <hr>

			    <button id = "Sub" type="submit" class="registerbtn">Зарегистрироваться</button>

			  </div>
			</form>


JS:

$(document).ready(function() {
         $("#Sub").bind("click", function(){
               if(psw != psw_repeat){
		     var ErrInfo = document.getElementById('pas_errors');
		     ErrInfo.innerText = 'Пароли не совпадают!';
		     setTimeout(function(){ErrInfo.innerText = '';}, 3000);
		     return false;
	      }
        });
     });


CSS:

*{
  box-sizing: border-box;
  position: relative;
}

body{
  background-image: url('img/bg.jpg');
}

label{
  font-family: 'IBM Plex Sans', sans-serif;
}

input{
  width: 100%;
  padding: 15px;
  margin-bottom: 22px;
  margin-top: 5px;
  display: inline-block;
  border: none;
  background: #f1f1f1;
  font-family: 'IBM Plex Sans', sans-serif;
  border-radius: 5px;
}

input#psw_repeat{
  margin-bottom: 0px;
  aria-label: none;
}

input:focus {
  background-color: #ddd;
  outline: none;
}

.registerbtn {
  background-color: #4CAF50;
  color: white;
  font-size: 120%;
  padding: 16px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
  border-radius: 5px;
}

.registerbtn:hover {
  opacity:1;
}

a {
  color: dodgerblue;
}

form{
  width: 450px;
  border: 1px solid gray;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  margin-top: 10%;
  border-radius: 15px;
  background-color: white;
  opacity: 0.98;
}

.cont{
  transition: 5s;
}

.container {
  padding: 16px;
}

.pas_errors{
  font-size: 110%;
  color: red;
  margin: 12px;
  font-family: 'IBM Plex Sans', sans-serif;
  position: relative;
  right: 13px;
}

.email_errors{
  font-size: 110%;
  color: red;
  margin: 12px;
  margin-top: -7px;
  font-family: 'IBM Plex Sans', sans-serif;
  position: relative;
  right: 13px;
}

.regitered{
  text-align: center;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 110%;
  position: relative;
  bottom: 11px;

}

h1{
  text-align: center;
  font-family: 'IBM Plex Sans', sans-serif;
}

p{
  text-align: left;
  font-family: 'IBM Plex Sans', sans-serif;
}

.Success p{
  font-size: 300%;
  color: green;
  text-align: center;
  font-family: 'IBM Plex Sans', sans-serif;
  margin-top: 20%;
}


Как сделать плавное изменение высоты формы при выведении ошибки?
  • Вопрос задан
  • 50 просмотров
Решения вопроса 1
sniggering_deus
@sniggering_deus Куратор тега CSS
I will live forever in the flame of your eyes.
Например можно как-то так:

Текст ошибки - переносите из скрипта в тот блок, в который добавляется текст при несовпадении паролей:

<p id="pas_errors" class="pas_errors">Пароли не совпадают!</p>


Далее добавляете transition для плавного перехода, max-height для обрезки блока по высоте и overflow: hidden запасом для обрезки лишнего:

.pas_errors {
  max-height: 0px;
  transition: max-height 1s ease-in-out;
  overflow: hidden;
   .........
}


В активном классе указываете нужную высоту до которой элементу можно будет растягиваться + отменяете свойство overflow: hidden:

.active {
  overflow: auto;
  max-height: 100px;
}


Скрипт полностью копируете и заменяете этим кодом, свой скрипт:

$(document).ready(function () {
  $("#Sub").bind("click", function () {
    if (psw != psw_repeat) {
      var ErrInfo = document.getElementById("pas_errors");
      ErrInfo.classList.add("active");
      setTimeout(function () {
        ErrInfo.classList.remove("active");
      }, 3000);
      return false;
    }
  });
});


При клике на кнопку добавляется активный класс / при повторном клике активный класс удаляется.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Lynatik001

Я вот не пойму, разве в гугле по такому же запросу не выдает сотни примеров?
вот добавляем в форму transition: 2s; - раз она росширяется. скорее всего профит. если я понял задачу
form{
width: 450px;
border: 1px solid gray;
margin-left: auto;
margin-right: auto;
position: relative;
margin-top: 10%;
border-radius: 15px;
background-color: white;
opacity: 0.98;
transition: 2s;
}


<div class="block-animation"></div>
.block-animation {
          width: 130px;
          height: 130px;
          background-color: #2196F3;
          transition: 3s;
        }
        
        .block-animation:hover {
          background-color: #3F51B5;
          height: 400px;
        }
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы