Utilisation de TweenMax dans le projet Angular2

Question

Comment puis-je configurer TweenMax dans mon projet Angular2? Au lieu d'ajouter le script dans mon code HTML que je veux être en mesure d'importer TweenMax semblable à ceci:

import { TweenMax } from 'gsap'; 

NOTE: J'utilise-cli angulaire.

Answer 1

Ajout de ce paquet externe à l'angulaire 2 est presque le même que tout autre paquet là-bas. jquery, firebase, vous l'appelez ..

Mais vous devez savoir que pour le moment, il n'y a pas de fichier de typage pour le module gsap. Vous ne pouvez donc pas choisir les importations comme vous le souhaitez. Cela signifie aussi pas intelisense dactylographiée :(Mais vous pouvez toujours l'utiliser comme ceci:

Étape 1: NPM l'installer

npm install gsap --save 

Étape 2: prévenir tapuscrit pour se plaindre de ne pas trouver la clases en ajoutant la ligne suivante au fichier 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:) 

Une fois que le fichier typages sont créés pour cette étape du module 4 devient:

typings install gsap --save. After that make sure you have included: /// <reference path="../typings/path to your gsap typings" /> 

Étape 3: l'utiliser dans votre composant - par exemple dans 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(); 
    } 
} 

Étape 4: dans cette configuration, il n'y a pas besoin d'ajouter quoi que ce soit au principal. ts (fichier bootstrap) alors profitez-en!

Answer 2

Il est un moyen plus facile juste

npm install --save-dev gsap 
npm install --save-dev @types/gsap 

dans votre fichier ts, l'importation GSAP

import {TweenLite} from "gsap"; 

et dans votre méthode ou sur ngOnInit vous pouvez écrire

let photo = document.getElementById("photo"); 
TweenLite.to(photo, 2, {width:"200px", height:"550px"}); 

si vous avez une div avec et l'ID de la photo

Answer 3

définition de type A côté d'ajouter pour GSAP, essayez:

• exécuter dehors de la zone angulaire
• assigner une instance avec this

comme ceci:

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 
     } 
    ); 
} 

Note: Testé sur Angulaire 5.2.4/Cli: 1.6.8/tapuscrit: 2.53