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

Question

[Павло Пономаренко]

Здравствуйте. Есть список, в нём - элементы. Появляется новый элемент и плавно выезжает сверху списка, сдвигая остальные вниз.

Я могу легко сделать это на css, зная точную высоту.

<div>
  <i>new</i>
  <i> 2 </i>
  <i> 3 </i>
  <i> 4 </i>
  <i>old</i>
</div>

div {
  position: absolute;
  overflow: hidden;
  height: 84px;
  background: rgba(124,0,0,0.25);
}
i {
  display: block;
  background: #999;
  width: 200px;
  height: 20px;
  margin-bottom: 1px;
}
i:first-child {
  margin-top: -21px;
  transition: linear all 1s;
}
div:hover i:first-child {
  margin-top: 0;
}

Но есть ли трюк, при котором это можно реализовать на css без знания высоты элемента, особенно если он может быть плавающей высоты?

Comments

[khomaldi]

как насчёт min-height?

[Павло Пономаренко]

Георгий Хомалдишвили, а какие есть варианты с min-height?

Answer 1

[Кристина]

Вот так можно https://codepen.io/kris-iris/pen/xyRGzq

Comments

[Павло Пономаренко]

Неплохая попытка, спасибо. Но тут две проблемы:
1. Необходимо знать количество элементов, да и сложности появляются - что, если сейчас есть всего один элемент, а мне необходимо добавить второй. Или когда удалять старый элемент? Или держать его, пока не появится новый
2. Переменная высота всё ещё не вариант