属性 'querySelector' 在类型 'Document' 上不存在

Question

我正在跟随 YouTube 上的某个家伙使用 GSAP 创建带有动画的登录页面，但在他使用滚动动画的部分，他使用了 gsap.to() 方法，但诀窍在于何时使用

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

它给我一个错误属性 'querySelector' 在类型 'Document'

上不存在

但它与男人完美搭配..我做了我的研究但找不到有用的东西这里是代码


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

我不知道为什么会有这段代码：

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

我会删除它。

然后我会去你的 tsconfig.json 并确保 'dom' 在 "lib": ["es2018", "dom"] 这将允许你直接从你的 [=15] 引用 document =] 文件，启用 document.querySelector('.paragraph').

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

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

Answer 2

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

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

做 gsap.to('.btn') ...

应该可以正常工作

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

属性 'querySelector' 在类型 'Document' 上不存在

Property 'querySelector' does not exist on type 'Document'

gsap

angular