Angular：intersectionObserver 和不同的阈值

Question

我为我的段落设置了观察者，一旦它滚动到某个阈值，它就会在新段落中淡出并淡出上面的段落。但是，该段落淡出的速度比我希望的要快，我想让该段落的动画再次不可见只有在它们离开视口时才会发生。现在，段落一达到阈值就消失了，但是有没有办法设置另一个消失阈值，同时保持元素出现时的阈值？

https://stackblitz.com/edit/angular-tpwhxc?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.css,src%2Fapp%2Fapp.module.ts

HTML:

 <div class="wrapper">
      <p>Start editing to see some magic happen :-)</p>
      <p #p1>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
        amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
        diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
        amet.
      </p>
      <p #p2>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
        amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
        diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
        amet.
      </p>
      <p #p3>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
        amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
        diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
        amet.
      </p>
      <p #p4>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
        amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
        diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
        amet.
      </p>
      <p #p5>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
        amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
        diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
        amet.
      </p>
      
      <div class="sites-circle" [ngClass]="mouseMove ? 'onMove' : 'notMove'">
        hello
      </div>
    </div>

TS:

import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, NavigationExtras, Router } from '@angular/router';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit  {

  constructor(private el: ElementRef) {}

  ngAfterViewInit() {
  const threshold = 0.7; // how much % of the element is in view
  const observer = new IntersectionObserver(
      (entries) => {
          entries.forEach((entry) => {
              if (entry.isIntersecting) {
                // this.vertImage1.nativeElement.classList.toggle('activate');
                // this.vertImage1.nativeElement.classList.add('activate');
                entry.target.classList.add('activate');
                  // observer.disconnect(); // disconnect if you want to stop observing else it will rerun every time its back in view. Just make sure you disconnect in ngOnDestroy instead
              }
              else{
                
                entry.target.classList.remove('activate');
              }
          });
      },
      { threshold }
  );
  observer.observe(this.p1.nativeElement);
  observer.observe(this.p2.nativeElement);
  observer.observe(this.p3.nativeElement);
  observer.observe(this.p4.nativeElement);
  observer.observe(this.p5.nativeElement);

}
@ViewChild('p1') p1!: ElementRef;
@ViewChild('p2') p2!: ElementRef;
@ViewChild('p3') p3!: ElementRef;
@ViewChild('p4') p4!: ElementRef;
@ViewChild('p5') p5!: ElementRef;
}

CSS：

p {
  font-family: Lato;
  font-size:35px;

  opacity:0;
  transition:.4s;
}



.wrapper {
  width: 100%;
}

p.activate{
  opacity:1;
}

Answer 1

根据文档：https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#thresholds

threshold 选项可以接受一个数组，该数组将触发每个交集比率值的回调执行。所以我认为你必须以这种方式更新你的代码

const threshold = [0.0, 0.7]; // add a 0.0 mark to trigger callback when your element is completly outside
const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('activate');
      } else {
        if (entry.intersectionRatio === 0.0) //This condition ensure we remove class only on 0.0 mark and not on 0.7 mark
          entry.target.classList.remove('activate');
      }
    });
  },
  { threshold }
);

更新 Stackblitz：https://stackblitz.com/edit/angular-qaktud?file=src%2Fapp%2Fapp.component.ts%3AL1,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.css,src%2Fapp%2Fapp.module.ts