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

问题描述

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

动画是关键帧动画，在.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,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,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”元素并更改该类以激活动画？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular intersection-observer