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

Question

我的工作流程目前使用的是webpack，eslint和angular。 在我的应用程序中.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>

如果您通读角度动画文档，您会发现以下内容：

对于 CSS 转换，必须在 启动CSS类(在本例中为.ng-enter)。目标类为 过渡将动画化为什么。

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

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

之后，一切都开始正常工作。希望我令人沮丧的浪费时间寻找一个实际上不存在的问题可以帮助其他人。

Answer 2

首先，使用以下命令通过 npm 安装"角度动画"库：

npm install 'angular-animate'

然后将其导入 App .js如下所示：

require('angular-animate')

做！！