Question

如何在Angular2项目中设置TweenMax。我希望能够导入与此类似的TweenMax，而不是在我的HTML中添加脚本：

import { TweenMax } from 'gsap';

注意：我正在使用angular-cli。

Answer 1

将此外部包添加到angular 2几乎与其他任何包一样。 jquery，firebase，你的名字..

但是你应该知道，目前gsap模块没有打字文件。所以你不能随意挑选进口产品。这也意味着打字稿中没有知识产权:(但你仍然可以像这样使用它：

第1步： npm安装

npm install gsap --save

第2步：通过在typings.d.ts文件中添加以下行来阻止打字稿抱怨没有找到文章：

declare var module: { id: string };

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

为此模块创建打字文件后，步骤4变为：

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：在此设置中，无需向main.ts（bootstrap文件）添加任何内容即可享受！

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照片

Answer 3

除了为gsap添加类型定义外，请尝试：

在Angular Zone之外运行
使用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
      }
    );
}

注意：在Angular 5.2.4 / Cli上测试：1.6.8 / typescript：2.53

在Angular2项目中使用TweenMax

3 个答案: