Анимировать модальное окно для изменения размера без установленных значений высоты ⇐ CSS

[Anonymous]

У меня есть модальное окно, которое появляется в нижней части страницы при нажатии кнопки. Внутри него будет форма, но в настоящее время ее нет. Внутри него просто есть элемент div с большим верхним и нижним полем в качестве заполнителя.
При нажатии кнопки отправки он удаляет этот элемент управления и заменяет его другим элементом управления, который намного меньше по размеру. высота (например, уведомление или предупреждение). Оба элемента div содержатся внутри модального элемента div.
После этого он меняет размер, поскольку элементы содержимого имеют разные размеры, но это происходит очень резко после того, как происходит изменение. Я хочу, чтобы он анимировался до меньшего размера. Но ни один из элементов div не имеет заданного свойства высоты, он расширяется в зависимости от содержимого внутри них.

Код: Выделить всё

Form

Thank you for your inquiry.

Код: Выделить всё

.quote {
position: fixed;
bottom: 0px;
right: 0px;
left: 0px;
/*height: 300px;*/
width: 100%;
background: #9900ff;
transform: translateY(800px);
transition: transform .2s ease;
opacity: .95;
}

.quote.active {
transform: translateY(0px);
transition: transform .2s ease;
}

.exit {
position: absolute;
top: 30px;
right: 30px;
width: 20px;
height: 20px;
cursor: pointer;
}

.exit span {
height: 2px;
width: 20px;
display: block;
background-color: #fafafa;
margin-top: 8px;
transform: rotate(45deg);
}

.exit span:before {
width: 20px;
content: "";
background-color: #fafafa;
height: 2px;
transform: rotate(90deg);
margin-top: -4px;
display: block;
}

.exit.active {
display: none;
}

.submit {
position: absolute;
bottom: 27px;
right: 33px;
width: 20px;
height: 20px;
cursor: pointer;
}

.submit span {
height: 2px;
width: 20px;
display: block;
background-color: #fafafa;
margin-top: 8px;
}

.submit span:before {
width: 10px;
content: "";
background-color: #fafafa;
height: 2px;
transform: rotate(45deg);
margin-top: -4px;
display: block;
float: right;
}

.submit span:after {
width: 10px;
content: "";
background-color: #fafafa;
height: 2px;
transform: rotate(-45deg);
margin-top: 4px;
display: block;
float: right;
}

.submit.active span {
display: none;
}

.quoteForm {
color: #fafafa;
/*display: block;*/
padding: 90px 0 90px 0;
width: 100%;
text-align: center;
transition: transform .9s ease;
}

.quoteAlert {
color: #fafafa;
/*display: block;*/
padding: 20px 0 20px 0;
width: 100%;
text-align: center;
transition: transform .9s ease;
}

Код: Выделить всё

function send(){
$('.exit').toggleClass('active');
$('.submit').toggleClass('active');
$('.quoteForm').fadeOut(0);
$('.quoteAlert').fadeIn(0);
$('.quote').delay(5000).fadeOut(500);
}

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

Подробнее здесь: https://stackoverflow.com/questions/787 ... ght-values