問題描述
我嘗試在我的 Ionic 3 項(xiàng)目中使用anime.js，但每當(dāng)我在.ts 文件中使用函數(shù)anime({}) 時(shí)，它都會(huì)報(bào)告錯(cuò)誤.
I am trying to use anime.js i my Ionic 3 project but whenever I use the function anime({}) in the .ts file it reports an error.
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 是:
my file animation.ts is :
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');
}
}
如果還有其他需要整理的文件，請(qǐng)?jiān)儐枺?em class="showen">
If there is any other file you need to sort this out please ask!
推薦答案
我也遇到了這個(gè)問題，并通過檢查DefinitelyTyped(鏈接).
I also had this problem, and fixed it by examining the tsconfig.json next to the typings in DefinitelyTyped (link).
我在本地 tsconfig 中缺少的是 "allowSyntheticDefaultImports": true.添加后，我可以以與 DefinitelyTyped 測(cè)試，它使用:
What I was missing in my local tsconfig was "allowSyntheticDefaultImports": true. With that added, I could import in the same way as the DefinitelyTyped test, which uses:
從animejs"導(dǎo)入動(dòng)漫；
然后它可以添加如下動(dòng)畫(具有預(yù)期的類型支持):
It then works to add animations like the following (with the expected type support):
anime({ targets: "#my-div", opacity: 0.5, duration: 1000 });
這篇關(guān)于Anime.js 在 Ionic 3 項(xiàng)目中不起作用的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！