将 AOS 库与 Angular4 应用程序集成

Question

I am working on Angular 4.4.6 application and I want to implement some animations on scroll using the awesome plugin AOS

my code:

app.component.ts

import * as AOS from 'aos';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss'],
 encapsulation:ViewEncapsulation.None
})
export class AppComponent implements OnInit {
 ngOnInit(){
  AOS.init();
 }
}

app.component.html

<div class="box" data-aos="slide-left">
      <img src="assets/imgs/seo.png" alt="">
</div>

angulr.cli.json

"styles": [
    "../node_modules/aos/dist/aos.css",
    "../node_modules/animate.css/animate.min.css",
    "styles.scss"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/aos/dist/aos.js"
  ],

I've tried the answer here with no hope https://stackoverflow.com/a/44808496/4183947

Note: I've no errors in my console.

Answer 1

I'm trying to get the same thing working for a site I'm migrating to Angular 4.2.4. Since you included the path to the AOS stylesheet in your angular.cli.json you probably already installed AOS via:

npm install aos --save

I got it running with the following:

// angular.cli.json
...
"styles": [
  "../node_modules/aos/dist/aos.css",
  "styles.scss"
],
"scripts": [],
...

and:

// app.component.ts
import { Component, OnInit } from '@angular/core';

import * as AOS from 'aos';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'app';

  ngOnInit() {
    AOS.init();
  }
}

and in my case I have markup in a HomeComponent:

// home.component.html
...
<div data-aos="fade-up" data-aos-once="true">
  the content
</div>
...

I might explore using AOS via the Angular Dependency Injection system in the future, as described in animate into view when scrolled to angular2 but simply importing AOS in app.component.ts is working so far.

Answer 2

npm install aos --save

Edit angular.cli.json

// angular.cli.json
...
"styles": [
"../node_modules/aos/dist/aos.css",
"styles.scss"
],
"scripts": [
"../node_modules/aos/dist/aos.js"
],
...

App Component

// app.component.ts
import { Component, OnInit } from '@angular/core';

import * as AOS from 'aos';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'app';

  ngOnInit() {
    AOS.init();
  }
}

In component html or where you want to add animation

...
<div data-aos="fade-up" data-aos-once="true">
  the content
</div>
...

Answer 3

Terminal

# if you use npm
npm install aos -s

# if you use yarn
yarn add aos

styles.scss

@import 'aos/dist/aos.css'; //<------ Add this line to the top

app.component.ts

import { Component } from '@angular/core';
import * as AOS from 'aos'; //<------ Add this line

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    constructor() {
        AOS.init(); //<------ Add this line
    }
}

Answer 4

For angular9+

do

npm install aos --save

add js and css file in angular.json

            "styles": [
              "./node_modules/aos/dist/aos.css"
            ],
            "scripts": [
              "./node_modules/aos/dist/aos.js"
            ]

In the app component (your root component), call AOS.init()

export class AppComponent {
  title = 'my-app';

  ngAfterViewInit() {
    AOS.init();
  }
}

Stop your if you are already running and then start again because you have changes in angular.json file

Answer 5

Make sure you have install all 3 Dependencies.

npm i classlist-polyfill
npm i lodash.debounce
npm i lodash.throttle

you can check here: https://www.npmjs.com/package/aos#init-aos

Answer 6

运行这个命令

npm i --save-dev @types/aos