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

Question

[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%;
}

Как сделать плавное изменение высоты формы при выведении ошибки?

Answer 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;
        }

Comments

[Rhino__222]

Спасибо большое!
Получилось!