Angular 4 – 当div进入视口时如何触发动画？

发布时间：2020-12-17 07:59:38 所属栏目：安全来源：网络整理

导读：我一直在使用Angular 4构建一个新站点,我正在尝试重新创建一个效果,当div变为可见时(向下滚动屏幕)然后可以触发角度动画以滑动div形式双方. 我以前在Angular 4之外使用jQuery已经能够做到这一点,但我想尝试使用原生的Angular 4动画创建相同的效果. 任何人都

我一直在使用Angular 4构建一个新站点,我正在尝试重新创建一个效果,当div变为可见时(向下滚动屏幕)然后可以触发角度动画以滑动div形式双方.

我以前在Angular 4之外使用jQuery已经能够做到这一点,但我想尝试使用原生的Angular 4动画创建相同的效果.

任何人都可以向我提供有关如何在div进入视图时触发动画的建议(即,当它进入视口时向下滚动到页面的下半部分？).我已经编写了幻灯片动画但我不知道如何在以后将div显示到视口时使用滚动触发它.

感谢大家！

我创建了一个指令,只要元素完全在视图中或者它的上边缘已到达视图的上边缘,就会发出一个事件.

这是一个吸烟者：https://embed.plnkr.co/mlez1dXjR87FNBHXq1YM/

它的使用方式如下：

<div (appear)="onAppear()">...</div>

这是指令：

import {
  ElementRef,Output,Directive,AfterViewInit,OnDestroy,EventEmitter
} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {Subscription} from 'rxjs/Subscription';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/startWith';

@Directive({
  selector: '[appear]'
})
export class AppearDirective implements AfterViewInit,OnDestroy {
  @Output()
  appear: EventEmitter<void>;

  elementPos: number;
  elementHeight: number;

  scrollPos: number;
  windowHeight: number;

  subscriptionScroll: Subscription;
  subscriptionResize: Subscription;

  constructor(private element: ElementRef){
    this.appear = new EventEmitter<void>();
  }

  saveDimensions() {
    this.elementPos = this.getOffsetTop(this.element.nativeElement);
    this.elementHeight = this.element.nativeElement.offsetHeight;
    this.windowHeight = window.innerHeight;
  }
  saveScrollPos() {
    this.scrollPos = window.scrollY;
  }
  getOffsetTop(element: any){
    let offsetTop = element.offsetTop || 0;
    if(element.offsetParent){
      offsetTop += this.getOffsetTop(element.offsetParent);
    }
    return offsetTop;
  }
  checkVisibility(){
    if(this.isVisible()){
      // double check dimensions (due to async loaded contents,e.g. images)
      this.saveDimensions();
      if(this.isVisible()){
        this.unsubscribe();
        this.appear.emit();
      }
    }
  }
  isVisible(){
    return this.scrollPos >= this.elementPos || (this.scrollPos + this.windowHeight) >= (this.elementPos + this.elementHeight);
  }

  subscribe(){
    this.subscriptionScroll = Observable.fromEvent(window,'scroll').startWith(null)
      .subscribe(() => {
        this.saveScrollPos();
        this.checkVisibility();
      });
    this.subscriptionResize = Observable.fromEvent(window,'resize').startWith(null)
      .subscribe(() => {
        this.saveDimensions();
        this.checkVisibility();
      });
  }
  unsubscribe(){
    if(this.subscriptionScroll){
      this.subscriptionScroll.unsubscribe();
    }
    if(this.subscriptionResize){
      this.subscriptionResize.unsubscribe();
    }
  }

  ngAfterViewInit(){
    this.subscribe();
  }
  ngOnDestroy(){
    this.unsubscribe();
  }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!