Question

我似乎无法正确行事。我设法很好地使用@HostListener来设置window:scroll但是我不确定如何附加使用CSS动画来动画div的className以在滚动时触发动画。

@HostListener('window:scroll', [])
onWindowScroll() {
  const number = this.document.body.scrollTop;
  if(number > 150 || number > 150) {
    this.isScrolled = document.getElementsByClassName('work-row').className = 'slideUp';
  }
}

非常感谢任何帮助。

Answer 1

以这种方式使用 addEventListener 和 renderer2

=============================================== ====

添加类的最佳方法是使用renderer2.According你的问题似乎想要在某个滚动级别后动态添加一个类？因此，使用Renderer 2添加类似这样的类

import { Directive, ElementRef, Renderer2, AnimationStyles, AnimationKeyframe, AnimationPlayer } from '@angular/core';

一旦你将其注入到像

这样的构造函数中

    constructor(
    public element: ElementRef, 
    public renderer: Renderer2, 
 ){}

现在使用这种方式动态添加你的类

this.renderer.addClass(this.ele_img,'slidup')

此处this.ele_img是您要设置动画的元素这样就行了

 import { Directive, ElementRef, Renderer2 } from '@angular/core';
    import { Component } from '@angular/core';
    export class HomePage {
                 constructor( 
                        public element: ElementRef, 
                        public renderer: Renderer2, 
                        ){}
                        ngOnInit() {
                               this.header = this.element.nativeElement.getElementsByClassName('scroll-content')[0];
                               const number = this.header.scrollTop;
                               this.ele_img = this.element.nativeElement.getElementsByClassName('img')[0];}
                               this.header.addEventListener('scroll', () => {
                                     if(number > 150 || number > 150) {
                                     this.renderer.addClass(this.ele_img,'slidup')
                                    }

                               });
                        }

  }

Angular 4幻灯片使用滚动事件

1 个答案: