animate into view when scrolled to angular2

问题

I found a library for animating elements into view when scrolled to (aos), but it doesn't seem to have any angular2 bindings for using. Does anyone know of how to accomplish something like this inside angular2, or at least configure aos to work within angular2?

Thanks for any help

回答1:

Angular (meaning version 2+) makes it pretty easy to include any 3rd-party JS libraries into your app. I was able to get aos working in Angular 4 by following these steps:

Disclaimer: you may be able to accomplish the same or better using @angular/animations, but if you want to use aos (or other third-party libraries) in Angular, this will show you how to do it. To learn more about how to use @angular/animations, visit https://angular.io/guide/animations

Install the Angular CLI: npm i -g @angular/cli
Create a new Angular app: ng new angular-aos-app
Install aos: npm i --save aos

Include the aos CSS in .angular-cli.json:

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

Wire up aos through Angular's Dependency Injection system:

// 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 { }

Inject aos into your component:

//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
  }  
}

Add some aos animation to your HTML: <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>

来源：https://stackoverflow.com/questions/41821160/animate-into-view-when-scrolled-to-angular2

标签

angular

css-animations