元素之间的动画延迟

Question

我有一个用 javascript 创建的简单显示动画，我遇到的问题是同一行上的元素都一起进入，我希望它们之间有一个小的延迟，我无法做到达到。在移动设备上，因为它们可以堆叠，所以问题出在台式机上。希望可以有人帮帮我。非常感谢

function reveal() {
  var reveals = document.querySelectorAll(".reveal");

  for (var i = 0; i < reveals.length; i++) {
    var windowHeight = window.innerHeight;
    var elementTop = reveals[i].getBoundingClientRect().top;
    var elementVisible = 150;

    if (elementTop < windowHeight - elementVisible) {
      reveals[i].classList.add("active");
    } else {
      reveals[i].classList.remove("active");
    }
  }
}

window.addEventListener("scroll", reveal);

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Arial", sans-serif;
}
body{
  background: #42455a;
}
section{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
section:nth-child(1){
  color: #e0ffff;
  }
section:nth-child(2){
  color: #42455a;
  background: #e0ffff;
} 
section:nth-child(3){
  color: #e0ffff;
}
section:nth-child(4){
  color: #42455a;
  background: #e0ffff;
}
section .container{
  margin: 100px;
}
section h1{
  font-size: 3rem;
  margin: 20px;
}
section h2{
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
}
section .text-container{
   display: flex;
}
section .text-container .text-box{
  margin: 20px;
  padding: 20px;
  background: #00c2cb;
}
section .text-container .text-box h3{
  font-size: 30px;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 10px;
}

@media (max-width: 900px){
  section h1{
    font-size: 2rem;
    text-align: center;
  }
  section .text-container{
    flex-direction: column;
  }
}

.reveal{
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 1s all ease;
}

.reveal.active{
  transform: translateY(0);
  opacity: 1;
}

<section>
  <h1>Scroll Down to Reveal Elements &#8595;</h1>
</section>
<section>
  <div class="container">
    <h2>Caption</h2>
    <div class="text-container">
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <h2>Caption</h2>
    <div class="text-container">
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <h2>Caption</h2>
    <div class="text-container">
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
    </div>
  </div>
</section>

Answer 1

你可以使用setTimeout to execute a function with a delay in milliseconds. In the modified reveal function below I used this inside the for loop. By adding half a second (500 ms) every time you call setTimeout你可以创建延迟的效果。

function reveal() {
  var reveals = document.querySelectorAll(".reveal");
  let timeOutMili = 0;

  for (var i = 0; i < reveals.length; i++) {
    setTimeout(function(reveal) {
      var windowHeight = window.innerHeight;
      var elementTop = reveal.getBoundingClientRect().top;
      var elementVisible = 150;
      
      if (elementTop < windowHeight - elementVisible) {
        reveal.classList.add("active");
      } else {
        reveal.classList.remove("active");
      }
    }, timeOutMili, reveals[i]);
    timeOutMili += 500;
  }
}

Answer 2

您可以使用超时来延迟它们，根据它们的索引插入它们各自的 .container。

类似

function reveal() {
  const windowHeight = window.innerHeight;
  const elementVisible = 150;
  const visibilityLimit = windowHeight - elementVisible;
  const containers = document.querySelectorAll(".container");

  containers.forEach(container => {
    const reveals = container.querySelectorAll(".reveal");
    reveals.forEach((reveal, index) => {
      const elementTop = reveal.getBoundingClientRect().top;
      if (elementTop < visibilityLimit) {
        setTimeout(() => {
          reveal.classList.add("active")
        }, index * 250);
      } else {
        reveal.classList.remove("active");
      }
    });
  });
}

window.addEventListener("scroll", reveal);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Arial", sans-serif;
}

body {
  background: #42455a;
}

section {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

section:nth-child(1) {
  color: #e0ffff;
}

section:nth-child(2) {
  color: #42455a;
  background: #e0ffff;
}

section:nth-child(3) {
  color: #e0ffff;
}

section:nth-child(4) {
  color: #42455a;
  background: #e0ffff;
}

section .container {
  margin: 100px;
}

section h1 {
  font-size: 3rem;
  margin: 20px;
}

section h2 {
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
}

section .text-container {
  display: flex;
}

section .text-container .text-box {
  margin: 20px;
  padding: 20px;
  background: #00c2cb;
}

section .text-container .text-box h3 {
  font-size: 30px;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 10px;
}

@media (max-width: 900px) {
  section h1 {
    font-size: 2rem;
    text-align: center;
  }
  section .text-container {
    flex-direction: column;
  }
}

.reveal {
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 1s all ease;
}

.reveal.active {
  transform: translateY(0);
  opacity: 1;
}

<section>
  <h1>Scroll Down to Reveal Elements &#8595;</h1>
</section>
<section>
  <div class="container">
    <h2>Caption</h2>
    <div class="text-container">
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <h2>Caption</h2>
    <div class="text-container">
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <h2>Caption</h2>
    <div class="text-container">
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box reveal">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
    </div>
  </div>
</section>

元素之间的动画延迟

Animation delay between elements

html

javascript

css

animation

css-animations