为什么 Intersection Observer 在第一个元素相交时向所有观察到的元素添加 class？

Question

原谅我的无知，因为我正在学习。我正在努力让 divs 与 .entry 的 class 相交，通过向它们添加 .entry-animation 的 class 来在与 Intersection Observer 相交时进行动画处理。

我以前从未使用过选择所有元素和制作动画。在第一个交叉点上，所有元素同时进行动画处理。我做错了什么？

演示如下：

JSFiddle

这是HTML:

  <div id="content-container">
    <div class="content">

      <div class="entry">
        <h2>
          Title of Post 1
        </h2>
        <p>
          Some content here on each entry
        </p>
      </div>
      <div class="entry">
        <h2>
          Title of Post 2
        </h2>
        <p>
          Some content here on each entry
        </p>
      </div>
      <div class="entry">
        <h2>
          Title of Post 3
        </h2>
        <p>
          Some content here on each entry
        </p>
      </div>
      <div class="entry">
        <h2>
          Title of Post 4
        </h2>
        <p>
          Some content here on each entry
        </p>
      </div>
      <div class="entry">
        <h2>
          Title of Post 5
        </h2>
        <p>
          Some content here on each entry
        </p>
      </div>
      <div class="entry"></div>
    </div>
  </div>

这是CSS:

body {
  background: #FFF;

}

.entry {
  background: #f6f6f6;
  text-align: center;
  padding: 5%;
  margin: 5%;
  border: 1px solid #ccc;
  border-radius: 15px;
  box-shadow: 0 4px 5px #cecece;
}


.entry-animation {
    animation: 2s fadeIn-1;
    animation-fill-mode: both;
}

@keyframes fadeIn-1 {
    0% {
        transform: translateY(20%);
        opacity: 0;
}
    100%{
        transform: translateY(0);
        opacity:1;
    }
}

这是JS：

const options = {
  threshold: 0.4,
};

const blogs = document.querySelectorAll('.entry');

const observer = new IntersectionObserver(function(entries, observer) {

  entries.forEach((entry) => {

    if (!entry.isIntersecting) {
      return;
    }
    blogs.forEach(blog => blog.classList.add('entry-animation'));


  },options);
});

blogs.forEach(blog => observer.observe(blog));

Answer 1

您可以通过替换以下内容轻松解决此问题：

blogs.forEach(blog => blog.classList.add('entry-animation'));

和

entry.target.classList.add('entry-animation')

在 entries.forEach() 循环中。这里的问题基本上是我们只需要将动画 class 添加到使用 entry.target 在视图中的元素，而不是一次将它们添加到所有元素。

Working Demo

为什么 Intersection Observer 在第一个元素相交时向所有观察到的元素添加 class？

Why is Intersection Observer adding class to all observed elements upon intersection of first element?

html

javascript

css

animation

intersection-observer