具有交叉观察器角度的活动动画

Question

我有一些动画，我需要用相交观察器触发它。

动画是关键帧动画，在.animated类中处于活动状态，而在.animatable类中处于停止状态

import { Component, OnInit,OnAfterViewInit, ElementRef, HostBinding } from '@angular/core';

@Component({
  selector: 'app-animation',
  templateUrl: './animation.component.html',
  styleUrls: ['./animation.component.css']
})
export class AnimationComponent implements OnInit {

  @HostBinding('class.animatable') isVisibleInView = false;

  private observer: IntersectionObserver;

  constructor(private el: ElementRef) {

  }

 
    ngOnInit() {
    this.observer = new IntersectionObserver( entries => {
      if ( entries[0].isIntersecting === true ) {
        this.isVisibleInView = true;
        const reconocer = this.el.nativeElement.querySelectorAll('p');
        reconocer.classList.remove('animatable'); 
        reconocer.classList.add('animated'); 
        console.log(reconocer);


   
      } else {
        
        this.isVisibleInView = false;
      }
    }, {
      threshold: 0.75
    });

    this.observer.observe(this.el.nativeElement as HTMLElement);
  }




<div class="container">
    <h1 class="text-center">text and icons animation</h1>
    <H1 class="text-center">SCROLL DOWN >>>>>>></H1>
    <div class="space">
    </div>
    <div class="box row">
        <div class="col-sm-6">

            <h1 class="text-animation">2 great value superfast fibre broadband deals</h1>
            <p class="text-animation animatable revealOnScroll2">Lorem ipsum dolor sit, amet consectetur adipisicing elit. A doloremque quam dicta aperiam hic ab est tempora pariatur harum placeat, corrupti et! Incidunt, nemo perferendis delectus autem alias voluptas cupiditate.</p>
        </div>
        <div class="col-sm-6">

            <div class="content">
                <div class="list-icons">
                    <i class="fa fa-arrow-down icon-size  animatable revealOnScroll" aria-hidden="true"></i>
                </div>
                <div class="info-icon">
                    <h4 class="revealOnScroll-p text-animation-2 animatable">explore</h4>
                    <p class="revealOnScroll-p animatable text-animation-2">bla bla bla dolor sit amet, consectetur adipisicing elit. Possimus, consequuntur facere. Quidem nihil fugit corrupti incidunt
                    </p>
                </div>

            </div>
            <div class="content">
                <div class="list-icons">
                    <i class="fa  fa-database icon-size  animatable revealOnScroll" aria-hidden="true"></i>
                </div>
                <div class="info-icon">
                    <h4 class="revealOnScroll-p text-animation-2 animatable">discover</h4>
                    <p class="revealOnScroll-p text-animation-2 animatable"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, consequuntur facere. Quidem nihil fugit corrupti incidunt</p>
                </div>

            </div>

            <div class="content">
                <div class="list-icons">
                    <i class="fa fa-exclamation-triangle icon-size  animatable revealOnScroll" aria-hidden="true"></i>
                </div>
                <div class="info-icon">
                    <h4 class="revealOnScroll-p text-animation-2 animatable">researching</h4>
                    <p class="revealOnScroll-p text-animation-2 animatable">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, consequuntur facere. Quidem nihil fugit corrupti incidunt</p>
                </div>

            </div>
        </div>
        <div class="space">
        </div>
    </div>
    <router-outlet></router-outlet>

如何通过交叉观察器将.animatable类更改为.animated类？

@HostBinding（'class.animatable'）isVisibleInView = false;我又做了一个主机绑定的可动画类，在函数onInit（）中如何获取h1或“ p”元素并更改该类以激活动画？