Как плавно добавить динамически созданный элемент в DOM, используя только CSS3? - PullRequest
Новая
       47

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

0 голосов
/ 09 июня 2018

Моя потребность довольно проста, но я не смог найти правильного решения.

Я создаю элементы и добавляю их в 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>

С жестко заданной максимальной высотой (выглядит красиво): With hardcoded max-height

С неустановленной максимальной высотой (выглядит неуклюже): With unset max-height

1 Ответ

0 голосов
/ 10 июня 2018

Поскольку вы определяете фиксированную высоту, решение состоит в том, чтобы анимировать высоту от 0px до фиксированного значения.Хитрость заключается в том, чтобы полагаться на переменную CSS, чтобы иметь возможность динамической анимации элементов в зависимости от их высоты: 

function addElement() {
  let dynamicHeight = Math.ceil(Math.random() * 100) + 40;
  let newElem = `<div class='elem' style='--h: ${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: slidein 0.5s forwards;
}

@keyframes slidein {
  from {
    height: 0px;
    transform: scale(0);
    opacity: 0;
  }
  to {
    height:var(--h); /*This will change for each element */
    transform: scale(1);
    opacity: 1;
  }
}
<button id="button">Add element</button>
<div id="elements"></div>
...