将AOS库与Angular4应用程序集成

问题描述：

我正在使用Angular 4.4.6应用程序，我想使用很棒的插件 AOS

I am working on Angular 4.4.6 application and I want to implement some animations on scroll using the awesome plugin 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

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

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

Note: I've no errors in my console.

答

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

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": [],
...

和:

// 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中有标记:

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.

将AOS库与Angular4应用程序集成

相关推荐