属性“querySelector”类型“文档”上不存在

Question

我正在跟随 youtube 上的一些人使用 GSAP 创建带有动画的登陆页面， 但在他使用滚动动画的部分，他使用了 gsap.to() 方法，但诀窍是何时使用

docement.querySelector('string here to class name')

它给了我一个错误 属性“querySelector”在“文档”类型上不存在，

但它与该人完美配合..我做了我的研究，但找不到任何有用的东西，这里是代码

import { Document } from './../../node_modules/yaml/index.d';
import { DOCUMENT } from '@angular/common';
import {
  Component,
  ElementRef,
  Inject,
  Injectable,
  OnInit,
  ViewChild,
} from '@angular/core';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})

@Injectable()
export class AppComponent implements OnInit {
  @ViewChild('secondSection', { static: true })
  secondSection!: ElementRef<HTMLDivElement>;
  @ViewChild('imageFirst', { static: true })
  imageFirst!: ElementRef<HTMLDivElement>;
  @ViewChild('imageSecond', { static: true })
  imageSecond!: ElementRef<HTMLDivElement>;
  @ViewChild('menu', { static: true })
  menu!: ElementRef<HTMLDivElement>;
  @ViewChild('heading_1', { static: true })
  heading_1!: ElementRef<HTMLHeadingElement>;

  constructor(@Inject(DOCUMENT) private document: Document) {}

  ngOnInit(): void {
    this.initialAnimations();
    this.initScrollAnimations();
  }

  initScrollAnimations(): void {
    gsap.to(this.imageFirst.nativeElement, {
      scrollTrigger: {
        trigger: this.imageFirst.nativeElement,
        scrub: true,
        start: '120% center',
      },
      duration: 1.1,
      scale: 1.2,
      height: 250,
    });

    gsap.to(this.imageSecond.nativeElement, {
      scrollTrigger: {
        trigger: this.imageSecond.nativeElement,
        scrub: true,
        start: '80% center',
      } as ScrollTrigger.Vars,
      duration: 1.1,
      scale: 1.2,
      height: 380,
    });

    gsap.to(this.heading_1.nativeElement, {
      scrollTrigger: {
        trigger: this.heading_1.nativeElement,
        scrub: true,
        start: '150% center',
      } as ScrollTrigger.Vars,
      color: '#fff',
      duration: 1.5,
    });

    gsap.to(this.document.querySelector('.paragraph'), {
      scrollTrigger: {
        trigger: this.document.get('.paragraph'),
        scrub: true,
        start: '150% center',
      } as ScrollTrigger.Vars,

      color: '#fff',
      duration: 1.5,
    });

    gsap.to(this.document.querySelector('.btn'), {
      scrollTrigger: {
        trigger: this.document.get('.btn'),
        scrub: true,
        start: '150% center',
      } as ScrollTrigger.Vars,

      color: '#fff',
      duration: 1.5,
    });

    gsap.to(this.document.querySelector('#story-line'), {
      scrollTrigger: {
        trigger: this.document.get('#story-line'),
        scrub: true,
        toggleClass: 'active',
        start: 'top center',
      } as ScrollTrigger.Vars,

      opacity: 0,
      y: 40,
      duration: 1.5,
    });

Answer 1

使用 gsap，您不需要传递实际的 DOM 元素，您只需作为字符串传递，gsap 将为您查询选择器。

所以而不是
gsap.to(this.document.querySelector('.btn') ...

执行
gsap.to('.btn') ...

应该可以正常工作

然后对 trigger 对象属性执行相同的操作

Answer 2

我不知道为什么这段代码存在：

constructor(@Inject(DOCUMENT) private document: Document) {}

我会删除它。

然后我会转到您的 tsconfig.json 并确保 'dom' 位于 "lib": ["es2018", "dom"] 这将允许您直接从 *.ts 文件引用 document，从而启用 document.querySelector('.paragraph')。

请注意，document.querySelector('.paragraph') 中不再有 this. 了。

https://stackblitz.com/edit/角度-ivy-h6kzqj?file=src/app/app.component.ts