ngAnimate 模块的安装不起作用答案

【问题标题】：Installation of ngAnimate Module not workingngAnimate 模块的安装不起作用
【发布时间】：2015-12-29 11:14:36
【问题描述】：

我似乎无法让 ng-animate 在现有的 1.2 应用程序中工作。我已按照 API 中的检查列表进行操作，但它没有应用适当的动画类。

我觉得我在安装过程中一定遗漏了一些愚蠢的东西。这是我所做的：

1 - 我在这里的文档头部加载了 angular 和 angular-animate：

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script> <!-- load angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"></script> <!-- load angular animate -->

2 - 我在此处将模块作为依赖项添加到我的应用声明中：

var app = angular.module('app', ['mainCtrl', 'mainService', 'ngRoute', 'ngAnimate', 'sortable', 'services.breadcrumbs']);

就是这样！它应该工作正常吗？我在使用 ng-show 时得到的只是 ng-hide 类。我也期待获得 ng-hide-add 和 ng-hide-remove 类，但没有任何改变。

我错过了什么？感谢您的帮助。

【问题讨论】：

标签： angularjs ng-animate

【解决方案1】：

设置 CSS 规则来处理动画；否则，在检查元素时，您将看不到对类的预期更改。

例子：

.ng-hide-add,
.ng-hide-remove {
  transition:0.5s linear all;

  display:block!important;
  opacity:1;
}
.ng-hide {
  opacity:0;
}

Demo

【讨论】：

Marc，我已经设置了这样的 css 规则，但它们什么也没做，因为“ng-hide-add”和“ng-hide-remove”类甚至都没有附加到对象。不知道我做错了什么......
我写这个答案的原因是：如果你不设置 CSS 规则，这些类将不会被添加/删除。查看我在答案中包含的 Plunker，您会看到动画正在使用您提供的版本工作。将您的代码与之比较，看看是否有任何明显的差异。
哇！我不知道。 +1 Marc，谢谢你:)。不幸的是，除非我使用测试版，否则它仍然不想在我的应用程序上运行。我尝试将您的 css 规则复制到我的文档中，但仍然没有看到任何更改。

【解决方案2】：

我认为这不应该算作一个答案，但如果我使用 angular 的 beta 版本 (1.3.0-beta.5)，它就可以正常工作。我还是想知道为什么稳定版不能正常工作，但是 beta 版是……

【讨论】：

【解决方案3】：

如果您使用的是ui-view 而不是ng-view，您可能需要将ng-animate-children attribute 添加到ui-view 标记中，html template 在其中加载。例如：

<ui-view ng-animate-children></ui-view>

它对我有用，因为我无法为 ng-repeat 制作动画。一旦我添加了这个attribute，动画就开始了。

希望这会有所帮助。 祝你好运。

【讨论】：