滚动到 angular2 时动画到视图中

Question

我找到了一个库，用于在滚动到 (aos) 时将元素动画化，但它似乎没有任何 angular2 绑定可供使用。有谁知道如何在 angular2 中完成这样的事情，或者至少将 aos 配置为在 angular2 中工作？

感谢您的帮助

Answer 1

对于那些从 2020 年开始遇到这个问题的人，在 Angular 的最新版本中有一个更简单的方法来解决这个问题：

1. 导入AOS库：npm i -s aos
2. 将输入导入 TypeScript：npm i -D @types/aos
3. 以全局样式导入CSS（可能是src/styles.scss）：@import "~aos/dist/aos.css";
4. 在项目的根组件（可能是 app-component.ts）上启动 AOS

import * as AOS from 'aos';
...
export class AppComponent implements OnInit {
    ngOnInit(): void {
        AOS.init();
    }
}

5. 要快乐：

<img data-aos="animation_name" src="..."/>

例如：

<img data-aos="fade" src="..."/>

动画名称列表：https://github.com/michalsnik/aos/tree/v2#-animations

高级设置：https://github.com/michalsnik/aos/tree/v2#-advanced-settings

Answer 2

Angular（意思是版本 2+）可以很容易地将任何 3rd-party JS 库包含到您的应用程序中。通过执行以下步骤，我能够让 aos 在 Angular 4 中工作：

免责声明：您可以使用@angular/animations 完成相同或更好的操作，但如果您想在Angular 中使用aos（或其他第三方库），本文将向您展示如何做到这一点。 要了解更多关于如何使用@angular/animations，请访问https://angular.io/guide/animations

• 安装 Angular CLI：npm i -g @angular/cli
• 创建一个新的 Angular 应用程序：ng new angular-aos-app
• 安装aos:npm i --save aos

• 在.angular-cli.json 中包含aos CSS：

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

• 通过 Angular 的依赖注入系统连接 aos：

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