Как сделать появление блока со смещением его соседей?

192

13 апреля 2022, 23:40

Вот так это должно выглядеть (чтобы посмотреть нажмите на плей сверху справа), именно с анимацией а не мгновенное появление.

https://www.figma.com/file/cBmVenHRn3Tm9nYN3TB7O0/question?node-id=0%3A1

Я сделал это через отрицательные margin, но есть ли способ покрасивее? Блоки могут быть любой высоты, поэтому задание фиксированной высоты не подходит.

Answer 1

Можно использовать max-height:0

{
  max-height: 0;
  transition: max-height 0.15s ease-out;
  overflow: hidden;
}

А при появлении:

{
    max-height: 500px;
    transition: max-height 0.25s ease-in;
}

Только установить какое то значение большое, которое блок никогда не достигнет

Answer 2

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: sans-serif;
}
.anim__container {
  display: flex;
  flex-direction: column;
  color: white;
}
.anim__item__content {
  padding: 10px;
}
.anim__item:nth-of-type(1) {
  background-color: #ED6565;
}
.anim__item:nth-of-type(2) {
  background: linear-gradient(180deg, #CAED65 0%, #65EDB4 100%);
  max-height: 0px;
  overflow: hidden;
  animation: 40s animateHeight ease-in-out forwards;
}
.anim__item:nth-of-type(3) {
  background-color: #ED9E65;
}
@keyframes animateHeight {
  0% {
    max-height: 0px;
  }
  100% {
    max-height: 100000px;
  }
}

<div class="anim__container">
  <div class="anim__item">
    <div class="anim__item__content">
      123
    </div>
  </div>
  <div class="anim__item">
    <div class="anim__item__content">
      123
    </div>
  </div>
  <div class="anim__item">
    <div class="anim__item__content">
      123
    </div>
  </div>
</div>