如何在Angular项目中高效获取ng-bootstrap断点用于动画？

这问题我之前在项目里也碰到过——Bootstrap的断点确实是CSS层面的东西，要在TypeScript里优雅获取来驱动动画，还得保证不拖垮性能，给你几个经过实践检验的靠谱方案：

Bootstrap 5+已经把断点值暴露成了CSS变量（比如--bs-breakpoint-sm、--bs-breakpoint-md），我们可以结合浏览器原生的ResizeObserver来监听窗口变化，获取当前断点。这种方式不用硬编码断点数值，后续Bootstrap更新断点时代码也不用改，而且ResizeObserver比传统的window.resize事件性能好得多，它会批量处理尺寸变化事件，不会频繁触发回调。

示例代码：

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-breakpoint-animation',
  templateUrl: './breakpoint-animation.component.html',
})
export class BreakpointAnimationComponent implements OnInit, OnDestroy {
  currentBreakpoint: string | null = null;
  private resizeObserver: ResizeObserver | null = null;
  // 映射断点名称和对应的CSS变量标识
  private breakpointKeys = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];

  ngOnInit(): void {
    this.getCurrentBreakpoint();
    this.initResizeListener();
  }

  ngOnDestroy(): void {
    this.resizeObserver?.disconnect();
  }

  private getCurrentBreakpoint(): void {
    const rootStyles = getComputedStyle(document.documentElement);
    const windowWidth = window.innerWidth;

    // 从最大的断点开始匹配
    for (const key of this.breakpointKeys) {
      if (key === 'xs') {
        this.currentBreakpoint = 'xs';
        break;
      }
      const breakpointValue = rootStyles.getPropertyValue(`--bs-breakpoint-${key}`).trim();
      if (windowWidth >= parseInt(breakpointValue)) {
        this.currentBreakpoint = key;
        break;
      }
    }

    // 根据当前断点触发动画逻辑
    this.handleAnimation();
  }

  private initResizeListener(): void {
    this.resizeObserver = new ResizeObserver(() => {
      this.getCurrentBreakpoint();
    });
    this.resizeObserver.observe(document.documentElement);
  }

  private handleAnimation(): void {
    // 这里写你的动画触发逻辑，比如根据断点添加/移除动画类
    const targetElement = document.querySelector('.your-animation-target');
    if (!targetElement) return;

    // 先清除所有动画类
    targetElement.classList.remove('animate-sm', 'animate-md', 'animate-lg');
    
    // 根据当前断点添加对应动画类
    switch(this.currentBreakpoint) {
      case 'sm':
        targetElement.classList.add('animate-sm');
        break;
      case 'md':
        targetElement.classList.add('animate-md');
        break;
      case 'lg':
        targetElement.classList.add('animate-lg');
        break;
      // 其他断点逻辑...
    }
  }
}

Angular CDK提供了MediaMatcher服务，可以直接匹配Bootstrap的媒体查询规则，这是Angular官方推荐的响应式解决方案，稳定性拉满，而且监听逻辑是浏览器原生支持的，性能也没问题。唯一需要注意的是要硬编码媒体查询字符串，如果Bootstrap的断点有更新，需要同步修改这里的规则。

示例代码：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { MediaMatcher } from '@angular/cdk/layout';

@Component({
  selector: 'app-breakpoint-animation',
  templateUrl: './breakpoint-animation.component.html',
})
export class BreakpointAnimationComponent implements OnInit, OnDestroy {
  currentBreakpoint: string | null = null;
  private mediaQuerySubscriptions: (() => void)[] = [];
  // 映射断点名称和对应的Bootstrap媒体查询
  private breakpointQueries = new Map([
    ['xxl', '(min-width: 1400px)'],
    ['xl', '(min-width: 1200px)'],
    ['lg', '(min-width: 992px)'],
    ['md', '(min-width: 768px)'],
    ['sm', '(min-width: 576px)'],
    ['xs', '(max-width: 575.98px)'],
  ]);

  constructor(private mediaMatcher: MediaMatcher) {}

  ngOnInit(): void {
    this.setupMediaListeners();
    this.setInitialBreakpoint();
  }

  ngOnDestroy(): void {
    // 清理所有媒体查询监听
    this.mediaQuerySubscriptions.forEach(unsubscribe => unsubscribe());
  }

  private setupMediaListeners(): void {
    this.breakpointQueries.forEach((query, breakpoint) => {
      const mediaQueryList = this.mediaMatcher.matchMedia(query);
      const listener = () => {
        if (mediaQueryList.matches) {
          this.currentBreakpoint = breakpoint;
          this.handleAnimation();
        }
      };
      mediaQueryList.addListener(listener);
      this.mediaQuerySubscriptions.push(() => mediaQueryList.removeListener(listener));
    });
  }

  private setInitialBreakpoint(): void {
    // 初始化时匹配当前断点
    for (const [breakpoint, query] of this.breakpointQueries) {
      if (this.mediaMatcher.matchMedia(query).matches) {
        this.currentBreakpoint = breakpoint;
        break;
      }
    }
    this.handleAnimation();
  }

  private handleAnimation(): void {
    // 你的动画逻辑，和方案1一致
  }
}

如果你的动画逻辑可以完全用CSS实现，那优先选这个方案——浏览器对CSS动画的优化远好于JS动画，完全不会有性能问题，而且代码更简洁。

示例代码：

/* 定义不同断点的动画 */
.your-animation-target {
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

/* sm断点动画 */
@media (min-width: 576px) {
  .your-animation-target {
    opacity: 1;
    transform: translateY(0);
  }
  .your-animation-target.animate-on-load {
    animation: slideUpSm 0.3s ease-in-out;
  }
}

/* md断点动画 */
@media (min-width: 768px) {
  .your-animation-target {
    opacity: 1;
    transform: translateX(0);
  }
  .your-animation-target.animate-on-load {
    animation: slideLeftMd 0.3s ease-in-out;
  }
}

/* 动画关键帧 */
@keyframes slideUpSm {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideLeftMd {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

模板里直接加类就行：

<div class="row">
  <div class="col-sm-12 col-md-6 col-xl-4 your-animation-target animate-on-load">
    <!-- 你的内容 -->
  </div>
</div>

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