Question

我正在开发Angular 4.4.6应用程序，我想使用awesome插件AOS

在滚动上实现一些动画

我的代码：

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"
  ],

我在这里毫无希望地尝试了答案 https://stackoverflow.com/a/44808496/4183947

注意：我的控制台中没有错误。

Answer 1

我正在努力为我正在迁移到Angular 4.2.4的网站工作。由于您在angular.cli.json中包含了AOS样式表的路径，因此您可能已经通过以下方式安装了AOS：

npm install aos --save

我使用以下内容运行：

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

和

// 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();
  }
}

在我的情况下，我在HomeComponent中有标记：

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

我可能会考虑将来通过角度依赖注入系统使用AOS，如animate into view when scrolled to angular2中所述，但只是在app.component.ts中导入AOS到目前为止。

Answer 2

npm install aos --save

编辑angular.cli.json

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

应用组件

// 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();
  }
}

在html组件中或要在其中添加动画的地方

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

Answer 3

端子

# 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

对于angular9 +

做

npm install aos --save

在angular.json中添加js和CSS文件

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

在应用程序组件（您的根组件）中，调用AOS.init（）

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

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

如果您已经在运行，请停止运行，然后重新启动，因为您对angular.json文件进行了更改

Answer 5

确保已安装所有3个依赖项。

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

您可以在这里检查： https://www.npmjs.com/package/aos#init-aos

Answer 6

运行这个命令

npm i --save-dev @types/aos

将AOS库与Angular4应用程序集成

6 个答案: