Question

我正在尝试使用anime.js我的Ionic 3项目，但每当我在.ts文件中使用函数动画（{}）时，它都会报告错误。

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

}

如果还有其他文件需要排除，请询问！

Answer 1

我也遇到了这个问题，并通过检查DefinitelyTyped（link）中类型旁边的tsconfig.json来解决。

我在本地tsconfig中缺少的是"allowSyntheticDefaultImports": true。添加该内容后，我可以采用与DefinitelyTyped test相同的方式导入，该方式使用：

import anime from 'animejs';

然后它可以添加以下动画（具有预期的类型支持）：

anime({ targets: "#my-div", opacity: 0.5, duration: 1000 });

Answer 2

尝试像这样导入它：

import * as anime from 'animejs';

这适合我。

Answer 3

似乎2.2.0以上的animjs在使用angular 7时存在一些问题。尝试使用此处所述的2.2.0版本：

https://github.com/juliangarnier/anime/issues/527

Answer 4

在更新到anime.js 3.0.1和@ types / animejs 2.0.2之后，我遇到了相同的错误，并希望此解决方法能够使用新的3.0.1并保留以前的工作：

animejs仍与我使用2.2.0时相同：

import * as anime from 'animejs';

并将我的通话从动漫*转到（动漫）。默认*

例如，它的更改自：

anime({ targets: "#my-div", opacity: 0.5, duration: 1000 });

收件人：

(<any>anime).default({ targets: "#my-div", opacity: 0.5, duration: 1000 });

或将其功能更改为：

anime.random(0, 360) * Math.PI / 180;

收件人：

(<any>anime).default.random(0, 360) * Math.PI / 180;

就像我说的那样，这是一种解决方法，直到更新@ types / animejs。

anime.js在Ionic 3项目中不起作用

4 个答案: