为什么Intersection Observer在第一个元素相交时向所有观察到的元素添加类？ [英] Why is Intersection Observer adding class to all observed elements upon intersection of first element?

问题描述

请原谅我的无知，因为我正在学习。我正在通过添加 .entry 类的 div 来与交点观察器相交时进行动画处理对他们来说是 .entry-animation 的类。

我以前从未选择所有元素并进行动画处理。在第一个相交处，所有元素同时进行动画处理。我在做什么错了？

这是演示：

JSFiddle

以下是HTML ：

 < div id = content-container> 
< div class = content> 
 
< div class = entry> 
< h2> 
职位1的标题
< / h2> 
< p> 
每个条目上的某些内容
< / p> 
< / div> 
< div class = entry> 
< h2> 
职位2的标题
< / h2> 
< p> 
每个条目上的某些内容
< / p> 
< / div> 
< div class = entry> 
< h2> 
职位3的标题
< / h2> 
< p> 
每个条目上的某些内容
< / p> 
< / div> 
< div class = entry> 
< h2> 
职位4的标题
< / h2> 
< p> 
每个条目上的某些内容
< / p> 
< / div> 
< div class = entry> 
< h2> 
职位5的标题
< / h2> 
< p> 
每个条目上的某些内容
< / p> 
< / div> 
< div class = entry>< / div> 
< / div> 
< / div> 
 
  

以下是CSS：

  body {
背景：#FFF; 
 
} 
 
 .entry {
背景：＃f6f6f6; 
 text-align：center; 
填充：5％； 
保证金：5％； 
边框：1px实心#ccc； 
 border-radius：15px; 
框阴影：0 4px 5px #cecece; 
} 
 
 
 .entry-animation {
 animation：2s fadeIn-1; 
 animation-fill-mode：两者； 
} 
 
 @keyframes fadeIn-1 {
 0％{
 transform：translateY（20％）; 
不透明度：0； 
} 
 100％{
转换：translateY（0）; 
不透明度：1； 
} 
} 
 
  

以下是JS：

  const选项= {
阈值：0.4，
}; 
 
常量博客= document.querySelectorAll（’。entry’）; 
 
 const观察者=新的IntersectionObserver（函数（条目，观察者）{
 
 entry.forEach（（entry）= >> {
 
 if（ ！entry.isIntersecting）{
 return; 
} 
 blogs.forEach（blog => blog.classList.add（'entry-animation'））; 
 
 
}，options）; 
}）； 
 
 blogs.forEach（blog => observer.observe（blog））; 
  

解决方案

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

  blogs.forEach（blog => blog.classList.add（'entry-animation'））; 
  

与

  entry.target.classList.add（'entry-animation'）
  

内部 entries.forEach（）循环。基本上，这里的问题是，我们只需要使用 entry.target 将动画类仅添加到可见的元素中，而不是立即将它们添加到所有这些元素中。 p>

工作演示

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));

解决方案

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

这篇关于为什么Intersection Observer在第一个元素相交时向所有观察到的元素添加类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！