Можно ли анимировать flex при добавлении контента?

Question

[TheSnegok]

Есть начальная страница поиска:

<main class="App">
	<div class="container">
		<header class="AppHeader_App_header__3NGN2"></header>
	</div>
</main>

После поиска добавляется div:

<main class="App">
	<div class="container">
		<header class="AppHeader_App_header__3NGN2"></header>
		<div class="ContentFound_content__I_WkD"></div>
	</div>
</main>

CSS код App:

.App {
	position: relative;
	background: url("./img/bg.svg") no-repeat fixed;
	background-size: cover;
	min-height: 100vh;
	width: 100%;
	overflow-x: hidden;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 3vh 10vw;
}

Возможно ли задать плавную анимацию app или container чтоб при таких изменениях работала?

Answer 1

[profesor08]

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

Comments

[TheSnegok]

Но я не могу его сдвинуть потому что у меня через flex всё сделано, это нужно для элемента который сдвинуть нужно задавать position: absolute?

Answer 2

[approximate solution]

Как пример:



Если не подошло, поискать в песочнице -
Link

Comments

[TheSnegok]

Но мне нужно чтобы не те что появляются плавно всплывали, а тот что первый плавно передвинулся выше, а то сейчас он просто прыгает, возможно ли такое на css?

[approximate solution]

TheSnegok, Можно всё. Как вариант использовать transform в совокупности с css animation
https://www.the-art-of-web.com/css/css-animation/