Как при появлении нового div'а плавно переместить уже имеющийся?

Question

[daniilyackovlev]

Есть отцентрированный блок с текстом и кнопкой. Кнопка появляется не сразу, а через некоторое время после загрузки страницы. Так как всё находится в центре, то текст "поднимается" рывком. Как сделать его плавное перемещение или зафиксировать в одном месте? Важно, чтобы страница адекватно отображалась на разных экранах.

<div class="container">
		<main class="text-center">
			<div>
				<h1>Текст</h1>
				<br/>
			</div>		
		
		<div class="buttontimervisible" id="vb">
		  
				<p><a href="javascript:void(0)" class="btn btn-md btn-light" onclick="showHide('block_id')">Контекст</a>
					<div class="text-center" id="block_id" style="display: none;">
					
					<br/>Контекст 1<br/>Контекст 2
					</div>
				</p>
		</div>
		
		</main>
		</div>

Расположение в центре:

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

Появление кнопки:

$(window).ready(function(){
		setTimeout ("$('#vb').fadeIn('slow');",3000);
	});

Comments

[Даниил Кириллов]

Лучше использовать обычные анимации CSS, а не на jQuery

[daniilyackovlev]

Кирилл Котов, можно ли будет ими реализовать то, что я хочу? Анимаций-то немного, переписать одну-две не проблема, думаю.

[Даниил Кириллов]

daniilyackovlev, Да, безусловно

[Даниил Кириллов]

daniilyackovlev, если нужна будет помощь пишите мне в ЛС https://vk.com/sk1llmuf

Answer 1

[Mark]

также до функции допиши $(".блок").animate({margin: "30px" }, 900);