javascript - ng-animate 在通过 webpack 加载时拒绝工作

Question

我的工作流程目前正在使用 webpack、eslint 和 angular。在我的 app.js 中，我需要 ng-animate 如下:

require("angular-animate/angular-animate.min");

然后按如下方式将其添加到我的应用中:

var mainApp = angular.module("client", [
  //add the components here (personal and 3rd party).
  "ngAnimate",
)];

问题是 ng-animate 似乎没有加载，因为当我尝试在 css 中为 ng-enter 等设置动画甚至购买 javascript 路由时，它似乎不起作用。

ng-animate 和angular 的版本都是一样的，都是v1.6.3。我在这里可能做错了什么吗？我需要在 eslint 或 webpack 中做些什么可能会阻止 ng-animate 工作吗？

Answer 1

我遇到了这个问题，在找出我的问题之前花了太长时间来寻找答案。这可能有帮助，也可能没有帮助，但如果有人发现此问题，请检查以下内容。

我有一个类似的 webpack 设置，我的 app.js 文件大致如下所示:

import angular from 'angular';
import ngAnimate from 'angular-animate';

angular
  .module('app', [
    ngAnimate
  ]);

没有错误，所有代码似乎都已正确导入，但是当我的 ng-if 指令添加或删除我的标记时，我的 ng-enter/exit 类仍然没有被应用。

<p ng-if="$ctrl.test" class="the-test">THE TEST</p>

如果您通读 Angular 动画文档，您会发现:

For CSS transitions, the transition code must be defined within the starting CSS class (in this case .ng-enter). The destination class is what the transition will animate towards.

我意识到我没有在我试图设置动画的类上定义过渡属性...所以我将我的 CSS 更改为以下内容:

  .the-test {
    color: grey;
    transition: color 1s ease;
  }
  .the-test.ng-enter {
    color: red;
  }
  .the-test.ng-enter.ng-enter-active {
    color: blue;
  }

在那之后，一切开始正常工作。希望我浪费时间寻找一个并不真正存在的问题可以帮助其他人。