离子项目中的GSAP

Question

如何将GSAP库导入Ionic项目。只使用 npm install gsap 在我通过

导入时不起作用

import { TweenMax, TimelineMax} from "gsap";

我使用打字稿。 感谢

Answer 1

你不需要打字。我已在几个项目中使用它（所有这些都是Typescript）：

1. 将您要使用的GSAP库放在assets/javascripts
中

2. 将您的文件包含在src/index.html文件中，如下所示：

   <script src="assets/javascripts/TweenMax.min.js"></script>

3. 在导入之后，像这样声明GSAP对象（在您将使用它们的所有视图中）：

   /*
     Normal imports here..
   */
   import { LoginPage } from "../login/login";
   
   declare var TimelineMax: any;        
   declare var TweenMax: any;
   declare var Power1: any;
   
   @Component({
     selector: 'page-profile',
     templateUrl: 'profile.html',
     providers: [Data, Api, DatePipe]
   })
   
   export class ProfilePage {
     ...
   

4. 使用正常：

   ...
   ionViewDidLoad(){
     TweenMax.from(".logo", .5, { 
       opacity: 0,
       y: -72,
       ease:  Power1.easeOut
     });
   }
   ...
   

Answer 2

典型导入

import {TweenMax, Power2, TimelineLite} from "gsap";

获取TweenMax

中未包含的部分

import Draggable from "gsap/Draggable";
import ScrollToPlugin from "gsap/ScrollToPlugin";

更多信息 -

https://www.npmjs.com/package/gsap#npm