单击某个元素可让该元素之后的元素向前滑动

<div id="container">
  <div class="item">元素1</div>
  <div class="item">元素2</div>
  <div class="item">元素3</div>
  <div class="item">元素4</div>
</div>

#container {
  width: 400px;
  overflow: hidden;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
  transition: transform 0.3s ease;
}

.slide {
  transform: translateX(-100%);
}

var container = document.getElementById("container");
var items = container.getElementsByClassName("item");

for (var i = 0; i < items.length; i++) {
  items[i].addEventListener("click", function() {
    this.classList.toggle("slide");
  });
}