Angular2プロジェクトでTweenMaxを使用する

Question

Angular2プロジェクトでTweenMaxを設定する方法を教えてください。

import { TweenMax } from 'gsap'; 

注：私は、角-CLIを使用しています代わりに私のHTMLにスクリプトを追加するので、私はこれに似たTweenMaxをインポートできるようにしたいです。

Answer 1

このアングル2への外付けパッケージは、他のパッケージとほぼ同じです。 jquery、firebase、あなたはそれに名前をつけます..

しかし、現時点では、gsapモジュール用の入力ファイルはありません。だから、あなたは桜を輸入することはできません。また、これはtypescriptですノーintelisenseを意味していない:(しかし、あなたはまだこのようにそれを使用することができます：

ステップ1：は、NPMインストールそれ

npm install gsap --save 

ステップ2：見つからない文句ためtypescriptですを防ぐためにclases typings.d.tsファイルに次の行を追加して：タイピングファイルは、このモジュールステップ4のために作成されたら

declare var module: { id: string }; 

declare let TimelineMax: any; // declare it as any. 
// so no error complains, Typescript compiler is happy now:) 

は次のようになります。

typings install gsap --save. After that make sure you have included: /// <reference path="../typings/path to your gsap typings" /> 

ステップ3：コンポーネントでそれを使う - たとえばapp.component.tsに：

import 'gsap' // this is required for TimelineMax() to work 
// decorator stuff here. 
export class AppComponent implements OnInit{ 

    ngOnInit(){ 

    let targetObject = document.getElementByTagName('h1'); 

    let tl = TimelineMax(); // this is free of errors now 

    tl.from(targetObject, 1, { x:400 }); 
    tl.play(); 
    } 
} 

ステップ4：このセットアップでを、メインには何も追加する必要はありません。 ts（ブートストラップファイル）のでお楽しみください！

Answer 2

だけ

npm install --save-dev gsap 
npm install --save-dev @types/gsap 

簡単な方法は、あなたのTSファイル、インポートGSAP

import {TweenLite} from "gsap"; 

し、あなたの方法やngOnInitにあなたがいる場合

let photo = document.getElementById("photo"); 
TweenLite.to(photo, 2, {width:"200px", height:"550px"}); 

を書くことができるですあなたは写真のdivとIDを持っています

横GSAPの型定義を追加10

Answer 3

、試す：

• が
• 角度ゾーンの外側を実行のでようthis

でインスタンスを割り当てる：

import { NgZone } from '@angular/core'; 
import {TweenMax} from "gsap"; 

myTween: any; 

constructor(private ngZone: NgZone){} 

ngOnInit() { 

    this.ngZone.runOutsideAngular(() => 
     { 
     this.tween = TweenMax; 
     this.tween.to(some params); // do your stuff 
     } 
    ); 
} 

注：試験済み角度5.2.4/Cli：1.6.8 /タイコーズ：2.53