Моя потребность довольно проста, но я не смог найти правильного решения.
Я создаю элементы и добавляю их в DOM в виде списка элементов, каждый новый элемент добавляется перед старыми.Я хотел бы, чтобы новые элементы были добавлены «плавно».height
каждого элемента является динамическим, поэтому это должны быть правила CSS.
Я думаю, что я должен использовать CSS animations
и keyframes
, из того, что я прочитал, я не могу использовать transitions
потому что иногда не отображается браузером .Я не хочу использовать Javascript, поэтому я предпочитаю избегать решения с setTimeout()
или jQuery
.Я уверен, что это можно сделать правильно, используя современный CSS, но мне все еще нужно найти правильный способ сделать это.
У меня есть начало решения (см. Ниже), , но все еще max-height: 1000px
жестко закодирован в CSS, и я хотел бы избежать этого, но я не знаю, как это сделать, потому что замена его на auto
или unset
нарушает анимацию (см. GIF в конце поста).
Как бы вы реализовали элегантный переход для добавления новых элементов в DOM, как это (необязательно используя предоставленный мною код)?
Попробуйтекод на JSFiddle
function addElement() {
let dynamicHeight = Math.ceil(Math.random() * 30) + 100;
let newElem = `<div class='elem' style='height: ${dynamicHeight}px'></div>`;
let elements = document.getElementById("elements");
elements.insertAdjacentHTML("afterbegin", newElem);
}
let button = document.getElementById("button")
button.addEventListener("click", addElement);
.elem {
background-color: blue;
margin: 5px;
animation-duration:0.5s;
animation-name: slidein;
}
@keyframes slidein {
from {
max-height: 0px;
transform: scale(0);
opacity: 0;
}
to {
max-height: 1000px;
transform: scale(1);
opacity: 1;
}
}
<button id="button">Add element</button>
<div id="elements"></div>
С жестко заданной максимальной высотой (выглядит красиво):
С неустановленной максимальной высотой (выглядит неуклюже):