Почему Intersection Observer добавляет класс ко всем наблюдаемым элементам при пересечении первого элемента?

Question

Простите мое невежество, пока я учусь. Я работаю над тем, чтобы анимировать div s с классом .entry при пересечении с Intersection Observer, добавляя к ним класс .entry-animation.

Я никогда не работал с выделением всех элементы и анимация раньше. На первом пересечении все элементы одновременно оживляются. Что я делаю не так?

Вот демоверсия:

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() l oop. Проблема здесь заключается в том, что нам просто нужно добавить класс анимации только к тем элементам, которые отображаются с помощью entry.target, вместо того, чтобы добавлять их ко всем сразу.

Рабочая демонстрация