2017-05-27 41 views
1

我想使用anime.js我是我的Ionic 3項目,但是當我在.ts文件中使用函數動畫({})時,它會報告錯誤。anime.js不能在Ionic 3項目中工作

Error: Uncaught (in promise): TypeError: __webpack_require__.i(...) is not a 
function 
TypeError: __webpack_require__.i(...) is not a function 
at new AnimationPage (http://localhost:8100/build/main.js:56040:78) 
at createClass (http://localhost:8100/build/main.js:11137:26) 
at createDirectiveInstance (http://localhost:8100/build/main.js:10973:37) 
at createViewNodes (http://localhost:8100/build/main.js:12323:49) 
at createRootView (http://localhost:8100/build/main.js:12228:5) 
at callWithDebugContext (http://localhost:8100/build/main.js:13359:42) 
at Object.debugCreateRootView [as createRootView] 
(http://localhost:8100/build/main.js:12820:12) 
at ComponentFactory_.create (http://localhost:8100/build/main.js:10164:46) 
at ComponentFactoryBoundToModule.create 
(http://localhost:8100/build/main.js:3779:29) 
at NavControllerBase._viewInit 
(http://localhost:8100/build/main.js:43786:44) 
at c (http://localhost:8100/build/polyfills.js:3:12642) 
at Object.reject (http://localhost:8100/build/polyfills.js:3:11998) 
at NavControllerBase._fireError 
(http://localhost:8100/build/main.js:43544:16) 
at NavControllerBase._failed (http://localhost:8100/build/main.js:43532:14) 
at http://localhost:8100/build/main.js:43587:59 
at t.invoke (http://localhost:8100/build/polyfills.js:3:8488) 
at Object.onInvoke (http://localhost:8100/build/main.js:4477:37) 
at t.invoke (http://localhost:8100/build/polyfills.js:3:8428) 
at r.run (http://localhost:8100/build/polyfills.js:3:3686) 
at http://localhost:8100/build/polyfills.js:3:13183 
Ionic Framework: 3.2.1 
Ionic App Scripts: 1.3.7 
Angular Core: 4.1.0 
Angular Compiler CLI: 4.1.0 
Node: 7.4.0 
OS Platform: Windows 10 
Navigator Platform: Win32 
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 
(KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 

我的文件animation.ts是:

import { Component } from '@angular/core'; 
import { IonicPage, NavController, NavParams } from 'ionic-angular'; 
import { trigger,state,style,transition,animate,keyframes } from '@angular/animations'; 
import { anime } from 'animejs'; 
/** 
* Generated class for the AnimationPage page. 
* 
* See http://ionicframework.com/docs/components/#navigation for more info 
* on Ionic pages and navigation. 
*/ 
@IonicPage() 
@Component({ 
    selector: 'page-animation', 
    templateUrl: 'animation.html', 

}) 
export class AnimationPage { 
    state: string ="small"; 
    constructor(public navCtrl: NavController, public navParams: NavParams) { 
     anime({ 
     targets: '.animatable', 
     translateX: 250 
     }); 

    } 


    animateThis(){ 
    this.state=(this.state=='small'?'large':'small'); 
    } 






    ionViewDidLoad() { 
    console.log('ionViewDidLoad AnimationPage'); 
    } 

} 

如果你需要理清了這一點請向任何其他文件!

+0

您的意思是這個? https://github.com/juliangarnier/anime你是如何包含它的? –

+0

是你提到的那個。用它來包含來自「animejs」的'import {anime};'我用npm來安裝 –

+0

,當你在打字稿中包含一個js庫時,你需要類型聲明......這就是缺少的......看起來像他們沒有包含它。大多數的圖書館有他們在這裏:https://github.com/DefinitelyTyped/DefinitelyTyped –

回答

0

嘗試導入這樣的:

import * as anime from 'animejs'; 

這對我的作品。

+0

謝謝!尋求幫助。 我找到了正確的方法 它是從../ somepath/anime.js導入動畫;' –