CSS / grid Анимация растягивания дополнительного элемента?

Question

Есть список элементов, которые зафиксированы по горизонтали. Пример

let item = document.querySelectorAll(".item");

let newItem = document.createElement('div');
newItem.className = "item-new";
newItem.innerText = 'width 75%';

for (let i = 0; i < item.length; i++) {
  item[i].addEventListener("click", function() {
    this.classList.toggle("active");
    this.after(newItem);
  })

}

body {
  margin: 0;
}

.list {
  min-width: 100%;
  display: grid;
  grid-gap: 0 30px;
  grid-auto-columns: calc(25% - 30px);
  grid-auto-flow: column;
}

.item {
  width: 100%;
  background: pink;
  min-height: 100px;
}

.item.active {
  background-color: red;
}

.item-new {
  width: 175%;
  /* Это не работает */
  background-color: red;
  min-height: 100px;
}

<div class="list">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

Как сделать, что б при нажатии на какой-то из элементов списка, после него создавался элемент, который бы занимал 75% от всего доступного пространства. Визуально, как бы пододвигая элементы которые следуют после него. * Нажимая на следующий элемент списка, первый созданный пропадал. Можно ли это как-то заанимировать ? Вроде, как поддержка плавной анимации в grid системе уже есть, но не знаю как реализовать такую в моем случаии

БЛОГ НА HUSL

CSS / grid Анимация растягивания дополнительного элемента?

Ответы (0 шт):