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

坚强是说给别人听的谎言 提交于 2020-05-16 03:15:45

问题


Pardon my ignorance, as I'm learning. I'm working on getting divs with the class of .entry to animate upon intersection with the Intersection Observer by adding the class of .entry-animation to them.

I've never worked with selecting all elements and animating before. Upon the first intersection, all elements simultaneously animate. What am I doing wrong?

Here's the demo:

JSFiddle

Here's the 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>

Here's the 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;
    }
}

Here's the 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));

回答1:


You can easily fix this issue by replacing:

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

with

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

inside entries.forEach() loop. The issue here is basically we just need to add the animation class to only the elements which are in view using entry.target, instead of adding them to all at once.

Working Demo



来源:https://stackoverflow.com/questions/61046574/why-is-intersection-observer-adding-class-to-all-observed-elements-upon-intersec

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!