Angular中anime.js文本动画无法启动问题求助

问题根源 #

1. TypeScript严格模式差异：StackBlitz默认关闭了strictNullChecks，不会触发textWrapper is possibly null的错误；而本地Angular项目通常默认开启严格模式，会严格检测空值类型。
2. DOM元素获取时机错误：如果在constructor或ngOnInit中获取DOM元素，此时组件视图还未渲染完成，textWrapper会是null，导致动画逻辑无法执行。StackBlitz的环境加载机制让代码刚好在视图渲染后执行，所以能正常运行。

解决步骤 #

1. 确保Anime.js依赖正确安装并导入 #

先安装依赖：

npm install animejs

在组件中导入：

import anime from 'animejs';

2. 正确获取DOM元素（推荐Angular原生方式） #

用ViewChild配合ngAfterViewInit钩子（视图渲染完成后执行）：

• 模板中添加模板引用变量：

<h1 #textWrapper class="text-wrapper">你的文本内容</h1>

• 组件类中编写逻辑：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import anime from 'animejs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild('textWrapper') textWrapper!: ElementRef<HTMLElement>;

  ngAfterViewInit(): void {
    const targetEl = this.textWrapper.nativeElement;
    // 拆分文本为单个字母的span
    targetEl.innerHTML = targetEl.textContent?.replace(/\S/g, "<span class='letter'>$&</span>") || '';

    // 执行Anime.js动画
    anime.timeline({ loop: true })
      .add({
        targets: '.letter',
        scale: [0.3, 1],
        opacity: [0, 1],
        translateZ: 0,
        easing: "easeOutExpo",
        duration: 600,
        delay: (el, i) => 70 * (i + 1)
      }).add({
        targets: '.letter',
        scale: [1, 0.3],
        opacity: [1, 0],
        translateZ: 0,
        easing: "easeInExpo",
        duration: 600,
        delay: (el, i) => 70 * (i + 1)
      });
  }
}

3. 补充必要样式 #

确保字母能正确显示动画，添加CSS：

.text-wrapper {
  display: inline-block;
}
.letter {
  display: inline-block;
}

备选方案：用document.querySelector（需注意时机） #

如果坚持用原生DOM查询，必须放在ngAfterViewInit中：

ngAfterViewInit(): void {
  const textWrapper = document.querySelector('.text-wrapper');
  if (!textWrapper) return;

  textWrapper.innerHTML = textWrapper.textContent?.replace(/\S/g, "<span class='letter'>$&</span>") || '';
  // 动画逻辑同上
}

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