Angular EnteredView指令问题求助：视口动画及触发时机异常

一、修复窗口调整大小时的指令触发异常 #

问题核心是窗口resize导致视口或元素位置变化时，IntersectionObserver未正确重新评估元素可见性，或指令内部状态逻辑未及时清理/更新。

解决步骤：

• 用Angular的HostListener监听窗口resize事件，避免手动绑定引发内存泄漏。
• resize触发时，先让observer停止监听当前元素，再重新启动监听，强制重新检查交叉状态。
• 指令销毁时清理observer和resize监听，释放资源。

示例代码片段：

@Directive({ selector: '[appAnimateOnEnter]' })
export class AnimateOnEnterDirective implements OnInit, OnDestroy {
  private observer: IntersectionObserver | null = null;
  private resizeHandler: (() => void) | null = null;

  constructor(private el: ElementRef) {}

  ngOnInit() {
    this.initObserver();
    this.initResizeListener();
  }

  ngOnDestroy() {
    this.observer?.disconnect();
    if (this.resizeHandler) {
      window.removeEventListener('resize', this.resizeHandler);
    }
  }

  private initObserver() {
    this.observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          this.el.nativeElement.classList.add('animate-up');
          this.observer?.unobserve(entry.target);
        }
      });
    }, { threshold: 0.1 });
    this.observer.observe(this.el.nativeElement);
  }

  private initResizeListener() {
    this.resizeHandler = () => {
      if (this.observer && this.el.nativeElement) {
        this.observer.unobserve(this.el.nativeElement);
        this.observer.observe(this.el.nativeElement);
      }
    };
    window.addEventListener('resize', this.resizeHandler);
  }
}

二、实现元素进入视口下方80px时触发动画 #

threshold参数仅控制元素可见比例，无法实现偏移触发需求，需使用IntersectionObserver的rootMargin配置：

• 设置rootMargin: '0px 0px -80px 0px'，该配置会将视口底部向上偏移80px，把触发区域限定在视口底部以上80px位置，元素进入此区域时触发交叉回调。
• 若导航栏为固定定位，保持root默认值（视口）即可。

调整后的Observer初始化代码：

private initObserver() {
  this.observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        this.el.nativeElement.classList.add('animate-up');
        this.observer?.unobserve(entry.target);
      }
    });
  }, {
    threshold: 0.1,
    rootMargin: '0px 0px -80px 0px' // 关键配置：底部向上偏移80px
  });
  this.observer.observe(this.el.nativeElement);
}

额外样式配置：

/* 初始状态 */
[appAnimateOnEnter] {
  transform: translateY(30px);
  opacity: 0;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

/* 动画触发状态 */
.animate-up {
  transform: translateY(0);
  opacity: 1;
}

内容的提问来源于stack exchange，提问作者Pieterjan