Ionic 项目中的 GSAP

Question

如何将 GSAP 库导入 Ionic 项目。当我通过

导入时，仅使用 npm install gsap 不起作用

import { TweenMax, TimelineMax} from "gsap";

我使用打字稿。 谢谢

Answer 1

典型导入

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

获取TweenMax

中未包含的部分

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

更多信息-

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

Answer 2

你不需要打字。我在几个项目中使用过它（都是 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
     });
   }
   ...