将AOS库与Angular4应用程序集成

Question

我正在开发Angular 4.4.6应用程序,我想使用强大的插件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"
  ],

我在这里尝试了答案,没有希望 /sf/answers/3136594751/

注意:我的控制台中没有错误.

Answer 1

我正在尝试为我正在迁移到Angular 4.2.4的网站工作.由于您在AOS样式表中包含了AOS样式表的路径,angular.cli.json您可能已经通过以下方式安装了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>
...

我可能会在将来通过Angular Dependency Injection系统探索使用AOS,如滚动到angular2时动画到视图中所描述的那样,但app.component.ts到目前为止只是导入AOS .

Answer 2

我在 Angular 12+ 中这样做

首先，使用终端安装 AOS

npm install --save aos

然后安装 AOS 类型以支持打字稿。

npm install --save @types/aos

将 AOS 样式和脚本添加到项目中： angular.json >architect > build > options >

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

"scripts": [
   "./node_modules/aos/dist/aos.js"
 ]

将 AOS 初始化到 AppComponent 或您想要使用它的任何组件。

import * as AOS from 'aos';

ngOnInit() {
   AOS.init();
}

在元素上使用 AOS 属性

<div data-aos="fade-up"> Your Content </div>

Answer 3

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