javascript - 如何使用 IntersectionObserver 使我的框只出现一次？

Question

我创建了一个用户界面，当用户向下滚动页面时，会出现 4 个带有“淡入”效果的网格框，但是当我们向上滚动页面时，再次向下滚动页面时，动画再次出现，而准确地说，我不想让动画做多次，而只是在盒子出现一次时。

这是我的代码:

const grid_objs = document.querySelectorAll('._grid-obj');

observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.intersectionRatio > 0) {
      entry.target.style.animation = `grid-obj .8s ${entry.target.dataset.delay} forwards ease`;
    } else {
      entry.target.style.animation = "none";
    }
  });
});

grid_objs.forEach((grid_obj) => {
  observer.observe(grid_obj);
});

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

.n-sec__ {
  min-height: 100vh;
  display:grid;
  max-height:100%;
  
}

._box {
  background:#f4f4f4;
  border-radius: 10px;
  position: relative;
}

._grid {
     display: grid;
     grid-template-columns: auto auto;
     min-width: 100%;
}
 ._grid ._grid-obj {
     display: grid;
     margin: 1em;
     padding: 2em;
     max-width: 800px;
     opacity: 0;
}
 ._grid ._grid-obj ._grid-title {
     color:#000000;
     font-family: 'Inter', sans-serif;
}
 ._grid ._grid-obj ._grid-p {
     font-weight: 300;
     color:#000000;
     padding: 0.5em 0;
     font-size: 10pt;
     line-height: 1.1em;
}

<section style="height:100vh;"></section>
<section class="n-sec__     ">
        <div class="_container  ">
            
            <div class="_grid">
                <div class="_grid-obj _box" data-delay="0s">
                    <h5 class="_grid-title _z">Community</h5>
                    <p class="_grid-p _z">Take advantage of a dynamic and caring community, present to propel you to the top of your ladder in your artistic journey. Mainly based on sharing, forge links between passionate or professional artists.</p>
                    <p class="_grid-p">Feel like the best at us (but stay yourself).</p>
                </div>
                <div class="_grid-obj _box" data-delay=".5s">
                    <h5 class="_grid-title">Share</h5>
                    <p class="_grid-p">Sharing is above all our priority, that's what our network represents. Indeed, we want to implement a realization of things that only very few people perceive. You have to know how to share and recognize your work as it is.</p>
                    <p class="_grid-p">So don't be shy, and show your work to other artists.</p>
                </div>
                <div class="_grid-obj _box" data-delay="1s">
                    <h5 class="_grid-title">Security</h5>
                    <p class="_grid-p">Your projects will always be fine at Nosfera, and uploaded on a secure server owned by <a href="//otux.cloud">otux.cloud</a>. Regarding your account, your password is encrypted and neither the administrative team has access to it.</p>
                    <p class="_grid-p">So you can sleep soundly.</p>
                </div>
                <div class="_grid-obj _box" data-delay="1.4s">
                    <h5 class="_grid-title">Customization</h5>
                    <p class="_grid-p">Manage your projects as you wish with our system dedicated to artistic organization.</p>
                    <p class="_grid-p">Manage your projects as you wish with our system dedicated to artistic organization. You have the ability to create the lists you want, reorganize your dashboard, pin the projects you want, and many more!</p>
                </div>
            </div>
        </div>
    </section>

我不知道为什么它在 jsfiddle 中不起作用，但它通常可以。

Answer 1

一旦您想要的行为第一次发生，您可以对观察者调用 unobserve() 以阻止它被观察到。 ( https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/unobserve )