스크롤 이벤트를 사용하는 각도 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, 
){} 

처럼 constructer에 그 주입 수입되면이

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') 
            } 

           }); 
         } 

    }