交叉路口观察器未按预期工作

Question

我有两个 section 标签，我希望它们在滚动时显示，并且 class is-visible 在它们通过视口时添加到部分.问题是 class is-visible 在元素通过视口之前被添加，并在它们通过时被删除！！这很奇怪我不知道我犯了什么错误，我可能错过了明显的，任何帮助我将不胜感激！

这是标记 index.html:

<section class="section  scrollspy services animated-content" id="services">
<div class="container">

  <h2 class="services-title show-onscroll">What We Do</h2>

    <!-- animated content 1 -->
      <section class="Analysis show-onscroll">
        <h3 class="tab-title ">Media Analysis</h3>
       
      </section>

      <!-- animated content 2 -->
      <section class="Monitoring show-onscroll">
        <h3 class="tab-title ">Media Monitoring</h3>
        
      </section>
</div>

</section>

style.css :

/* Animated services */

.animated-content div.container>section {
    border: 1em solid #fff;
    border-bottom: 4em solid #fff;
    border-radius: .25em;
    box-shadow: 1em 1em 2em .25em rgba(0, 0, 0, .2);
    margin: 2em auto;
    opacity: 0;
    transform: translateY(4em) rotateZ(-5deg);
    transition: transform 4s .25s cubic-bezier(0, 1, .3, 1), opacity .3s .25s ease-out;
    max-width: 600px;
    width: 90%;
    will-change: transform, opacity;
}

div.container>section.is-visible {
    opacity: 1;
    transform: rotateZ(-2deg);
}

.animated-content .services-title {
    transform: translateY(4rem) scale(1.2);
    opacity: 0;
}

.animated-content .services-title.is-visible {
    animation: clear .9s forwards;
}

.animated-content section>h3 {
    color: var(--heading-font-color);
    font-size: 2rem;
}

.animated-content section>h5 {
    color: var(--heading-font-color);
    font-size: 1.5rem;
    margin-bottom: 0;
}

.animated-content section>p {
    margin: 0;
}

@keyframes clear {
    to {
        opacity: 1;
        transform: none;
    }
}

index.js:

// Intersection observer
const callback = function (entries) {
    entries.forEach(entry => {
        entry.target.classList.toggle('is-visible');
    });
}
const observer = new IntersectionObserver(callback);
const targets = document.querySelectorAll('.show-onscroll');
targets.forEach(target => {
    observer.observe(target);
})

Answer 1

您没有为正在观察的元素添加 entry.isIntersecting 检查。我也从 toggle 切换到 add is-visible class。目前我不确定当元素不可见时是否要删除 is_visible class，但这可以在 entry.isIntersecting.[=20= 的 else 部分完成]

所以现在一旦我们的元素可见，我就停止观察它。

// Intersection observer
const callback = function (entries) {
    entries.forEach(entry => {
        if(entry.isIntersecting)
        {
            entry.target.classList.add('is-visible');
          observer.unobserve(entry.target)
          }
    });
}
const observer = new IntersectionObserver(callback);
const targets = document.querySelectorAll('.show-onscroll');
targets.forEach(target => {
    observer.observe(target);
})

/* Animated services */

.animated-content div.container>section {
    border: 1em solid #fff;
    border-bottom: 4em solid #fff;
    border-radius: .25em;
    box-shadow: 1em 1em 2em .25em rgba(0, 0, 0, .2);
    margin: 2em auto;
    opacity: 0;
    transform: translateY(4em) rotateZ(-5deg);
    transition: transform 4s .25s cubic-bezier(0, 1, .3, 1), opacity .3s .25s ease-out;
    max-width: 600px;
    width: 90%;
    will-change: transform, opacity;
}

div.container>section.is-visible {
    opacity: 1;
    transform: rotateZ(-2deg);
}

.animated-content .services-title {
    transform: translateY(4rem) scale(1.2);
    opacity: 0;
}

.animated-content .services-title.is-visible {
    animation: clear .9s forwards;
}

.animated-content section>h3 {
    color: var(--heading-font-color);
    font-size: 2rem;
}

.animated-content section>h5 {
    color: var(--heading-font-color);
    font-size: 1.5rem;
    margin-bottom: 0;
}

.animated-content section>p {
    margin: 0;
}

@keyframes clear {
    to {
        opacity: 1;
        transform: none;
    }
}

<section class="section  scrollspy services animated-content" id="services">
<div class="container">

  <h2 class="services-title show-onscroll">What We Do</h2>

    <!-- animated content 1 -->
      <section class="Analysis show-onscroll">
        <h3 class="tab-title ">Media Analysis</h3>
       
      </section>

      <!-- animated content 2 -->
      <section class="Monitoring show-onscroll">
        <h3 class="tab-title ">Media Monitoring</h3>
        
      </section>
</div>

</section>

交叉路口观察器未按预期工作

Intersection observer not working as expected

html

javascript

css

intersection-observer