web-dev-qa-db-ja.com

AOSライブラリをAngular4アプリケーションと統合する

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

私は希望なしにここで答えを試しました https://stackoverflow.com/a/44808496/4183947

注：コンソールにエラーはありません。

jqueryangularjquery-pluginsangular-animations
7
Peter Wilson

移行先のサイトで同じことを機能させようとしています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>
...

将来的には、Angular依存性注入システムを介してAOSを使用することを検討する可能性があります。これについては、 angular2にスクロールするとアニメーション化されます ですが、app.component.tsにAOSをインポートするだけで機能します。はるかに。

12
MarcDula
npm install aos --save

Angle.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>
...
8
charan ghumman