Question

我已经在Ionic 4项目中使用以下命令安装了AnimeJS：

npm i animejs --save
npm i @types/animejs --save

然后我尝试使用以下方法引用它：

import * as anime from 'animejs'

从animejs调用任何内容时，执行上述操作会给我以下错误：

错误：未捕获（承诺）：TypeError：对象不是函数（在“ ... animejs__WEBPACK_IMPORTED_MODULE_1 __...附近”）

但是，如果我通过引用node_modules目录中的anime.js进行导入，那么一切都会按预期进行。我认为通过安装@types/animejs，这将使我仅使用简单的import * as anime from 'animejs'，而不必直接引用node_modules目录中的文件。

为什么我可以使用node_modules文件夹而不是import * as anime from 'animejs'导入

导入后，我这样称呼它：

  openModal(modalPage) {
    // Define modal to open
    switch (modalPage) {
      case 'login' : {
        modalPage = LoginPage;
        break;
      }
      case 'register' : {
        modalPage = RegisterPage;
        break;
      }
    }

    // Open modal
    this.modalCtrl.create({
      component: modalPage,
      cssClass: 'intro-modal',
      showBackdrop: true,
      enterAnimation: this.animations.modalEnter
    }).then(modal => {
      // Hide intro buttons
      anime({
        targets: ['.intro-buttons'],
        translateX: '-100%',
        duration: 150,
        easing: 'linear'
      });

      // Animate slide back
      modal.onWillDismiss().then(() => {
        anime({
          targets: ['.intro-buttons'],
          translateX: '0%',
          duration: 150,
          easing: 'linear'
        });
      });

      // Present the modal
      modal.present();
    });
  }

Answer 1

将您的导入更新为以下内容：

import anime from 'animejs'

这将从default导入animejs导出，该导出实际上是一个函数，用于接收您试图传递的参数/对象。

这是一个https://github.com/Netflix/Hystrix/wiki/Configuration#executiontimeoutenabled的操作，显示了导入并将期望的对象传递到anime()而不触发错误。

使用现有的导入* as anime，如果您登录anime，则会看到该对象的属性default，这是您需要的实际功能。您还将看到导入带来了各种其他属性/功能，包括penner，stagger和timeline。您只是在先前的导入中定位了错误的属性。

希望有帮助！

无法在Ionic-Angular项目中导入AnimeJS

1 个答案: