javascript - 如何一次使用 translateY 到连续的显示元素？

Question

最终，对于每次单击按钮，我想显示一个包含新内容的元素。换句话说...

• 您阅读了包含在父容器中的内容
• 要查看下一个项目，请单击按钮
• 单击按钮时，旧内容会向下移动。新内容从容器顶部向下流动。它暂停以阅读新内容。
• 要获取新内容，请再次按下按钮。

我不清楚如何实现这一点，以及是否可以通过CSS动画实现。根据我发布的内容，它只需要两个元素并立即将它们沿垂直轴平移。如何对其进行重构，以便一个元素暂停并使用 justvanilla JavaScript显示其内容？

var div1 = document.querySelector(".first");
var div2 = document.querySelector(".second");
var button = document.querySelector("button");

var divs = [div1, div2];

button.addEventListener("click", function(event) {
  event.preventDefault();
  for (var i = divs.length - 1; i > -1; i--) {
    var div = divs[i];
    div.classList.remove("down_shift");
    void div.offsetWidth;
    div.classList.add("down_shift");
  }
});

body {
  background: #222;
}

section {
  width: 50vw;
  height: 300px;
  border: 5px solid red;
  margin: 50px auto;
  overflow: hidden;
}

.first, .second {
  width: inherit;
  height: 300px;
  background: red;
  transform: translateY(-300px);
}

.second {
  background: pink;
}

h1 {
  margin: 0;
  padding-top: 50px;
  text-align: center;
}

.down_shift {
  animation: down 1s ease-out;
}

@keyframes down{
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(300px);
  }
}

<section>
  <div class="first"><h1>1</h1></div>
  <div class="second"><h1>2</h1></div>
</section>
<button type="button">Click</button>

标签： javascripthtmlcss

Answer 1

您可以为元素添加包装器，并为包装器设置动画

var wrapper = document.querySelector(".wrapper");
var button = document.querySelector("button");


button.addEventListener("click", function(event) {
  event.preventDefault();
  wrapper.style.transform = 'translateY(-300px)'
});

body {
  background: #222;
}

section {
  width: 50vw;
  height: 300px;
  border: 5px solid red;
  margin: 50px auto;
  overflow: hidden;
}

.first, .second {
  width: inherit;
  height: 300px;
  background: red;
   /* transform: translateY(-300px); */
}

.second {
  background: pink;
}

.wrapper {
  transition: all 1s ease-out;
}

h1 {
  margin: 0;
  padding-top: 50px;
  text-align: center;
}




.down_shift {
  animation: down 1s ease-out;
}

@keyframes down{
  from {
    transform: translateY(0);
  }
  
  to {
    transform: translateY(300px);
  }
}

<section>
  <div class="wrapper">
    <div class="first"><h1>1</h1></div>
    <div class="second"><h1>2</h1></div>
  </div>
</section>
<button type="button">Click</button>