スクロールイベントを使用して角4スライド

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を使用することです。あなたの質問によれば、特定のスクロールの後にクラスを動的に追加したいようですレベル？ だから、動的

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

をあなたのクラスを追加するには、この方法を使用して、あなたが今、この

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

のように建設業者にその注入インポート一度この

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

のようにクラスを追加するためにレンダラー2を使用します

ここをクリック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') 
            } 

           }); 
         } 

    }