离子项目中的GSAP

问题描述

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

How can Import the GSAP library into an Ionic project. Just using npm install gsap don't work when I import through

import { TweenMax, TimelineMax} from "gsap";

我使用打字稿.谢谢

推荐答案

您不需要打字.我已经在几个项目(所有这些都是Typescript)中使用了它:

You don't need Typings for it. I've used it in several projects (all of them Typescript):

1. 将要使用的GSAP库放入assets/javascripts

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

1. Put the GSAP libraries you want to use in assets/javascripts

2. Include your file in your src/index.html file like this:

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

在导入后，立即声明GSAP对象，如下所示(在将要使用它们的所有视图中):

Right after your imports, declare the GSAP objects like this (in all the views you will be using them):

/*
  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 {
  ...

正常使用:

Use like normal:

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

这篇关于离子项目中的GSAP的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！