angular2로 스크롤 할 때 애니메이션보기

Question

(aos)로 스크롤 할 때 뷰에 애니메이션 요소를 적용하기위한 라이브러리가 있지만 사용을위한 angle2 바인딩이없는 것 같습니다. 누군가 angular2 내에서 이와 같은 것을 달성하는 방법을 알고 있습니까, 아니면 적어도 angular2 내에서 작동하도록 AOS를 구성합니까? (버전을 의미 2+) 꽤 쉽게 응용 프로그램에 어떤 제 3 자 JS 라이브러리를 포함 할 수

Answer 1

각도 어떤 도움

감사합니다. 나는 다음 단계에 따라 각도 4 일 aos를 얻을 수있었습니다 :

면책 조항 : 당신은 @angular/animations를 사용하여 동일한 또는 더 나은 달성 할 수있을 수 있지만, 당신은 aos (또는 제 3 자 라이브러리를 사용하려는 경우)를 입력하면이를 수행하는 방법이 표시됩니다. aosng new angular-aos-app

설치 : npm i --save aos

가 aos을 포함 npm i -g @angular/cli

새로운 각도 응용 프로그램을 만듭니다 는 https://angular.io/guide/animations

• 이 각도 CLI를 설치 방문, @angular/animations를 사용하는 방법에 대한 자세한 내용은 CSS in .angular-cli.json :

  { 
      ... 
      "apps": [ 
      { 
       ... 
       "styles": [ 
       "styles.css", 
       "../node_modules/aos/dist/aos.css" 
       ], 
       ... 
      } 
      ] 
      ... 
  } 
  

• 와이어 최대 aos 각도의 의존성 삽입 (Dependency Injection) 시스템을 통해 : 구성 요소에

  // aos.ts 
  import * as animateOnScroll from 'aos'; 
  import { InjectionToken } from '@angular/core'; 
  
  export const aos = animateOnScroll; 
  // This makes it possible to refer to AOS in Angular, see below 
  export const AosToken = new InjectionToken('AOS'); 
  

  // app.module.ts 
  import { BrowserModule } from '@angular/platform-browser'; 
  import { NgModule } from '@angular/core';   
  import { AosToken, aos } from './aos'; 
  import { AppComponent } from './app.component'; 
  
  @NgModule({ 
      declarations: [ AppComponent ], 
      imports: [ BrowserModule ], 
      providers: [ 
      //register AOS with DI 
      { provide: AosToken, useValue: aos } 
      ], 
      bootstrap: [ AppComponent ] 
  }) 
  export class AppModule { } 
  

• 를 주입 aos는 :

  //app.component.ts 
  import { Component, Inject } from '@angular/core'; 
  import { AosToken } from './aos'; 
  
  @Component({ 
      selector: 'app-root', 
      templateUrl: './app.component.html', 
      styleUrls: ['./app.component.css'] 
  }) 
  export class AppComponent { 
      title = 'app'; 
  
      //use the injection token to inject into your constructor 
      constructor(@Inject(AosToken) aos) { 
      aos.init(); //you can now use it, although you may want to do this onInit instead 
      } 
  } 
  

• 은 HTML 일부 aos 애니메이션을 추가 <ul data-aos="slide-left">

  <div style="text-align:center"> 
      <h1> 
      Welcome to {{title}}!! 
      </h1> 
  </div> 
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
  <h2>Here are some links to help you start: </h2> 
  <ul data-aos="slide-left"><!-- animate this list when you scroll down --> 
      <li> 
      <h2><a target="_blank" href="https://angular.io/tutorial">Tour of Heroes</a></h2> 
      </li> 
      <li> 
      <h2><a target="_blank" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2> 
      </li> 
      <li> 
      <h2><a target="_blank" href="http://angularjs.blogspot.ca/">Angular blog</a></h2> 
      </li> 
  </ul>