在Angular2项目中使用TweenMax

Question

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

import { TweenMax } from 'gsap';

注意:我正在使用angular-cli.

Answer 1

将此外部包添加到角度2几乎与其他任何包一样.jquery,firebase,你说出来..

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

第1步: npm安装它

npm install gsap --save

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

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(引导程序文件)添加任何内容即可享受!

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