ngAnimate 没有在 ui-view 中添加 ng-enter/ng-leave 类

Question

我一直在网上寻找解决我的问题的方法。我似乎无法弄清楚发生了什么。我们的应用程序非常庞大，所以我真的无法 post 编写糟糕的代码。我只是需要一些指导，我已经在谷歌上搜索了几个小时的相同内容。

当我向我的对象添加新数据时，ngAnimate 没有添加 ng-enter / ng-leave 等类。

当您实际上是 adding/removing 对象的数据时，ngAnimate 的行为是否相同，还是仅当您过滤数据时它才起作用？

我们正在使用 ui-router，主体是 ui-view - 当我们在 ui-view 中时，ngAnimate 的行为是否相同？

简要概述 (jade) - 显然我们的应用程序中还有很多代码：

body(ui-view)
  script(src='/main.js')
   div(ng-controller="Controller")    
     div.contain
       div.animate(ng-repeat="item in items")
         {{item.name}}

版本：

"dependencies": {
"angular": "1.3.15",
"angular-animate": "latest",
"angular-motion": "~0.4.2",
"angular-ui-router": "~0.2.13",
...

我什至直接从 plunker 复制了脚本，这些脚本是 plunkrs，但没有添加 ngAnimate 类。

这不是 CSS 问题，因为我什至没有看到检查器中添加了类。

我需要使用某个版本吗？这些需要按特定顺序加载吗？有什么东西可以一起禁用 ngAnimate 模块吗？

非常感谢您的任何建议。

编辑——我开始认为这是我们的一个或多个组件之间的不兼容问题——有人有什么想法吗？

这是我们的 bower.json 文件

"dependencies": {
   "angular": "1.3.15",
   "angular-animate": "1.4.3",
   "angular-motion": "~0.4.2",
   "angular-ui-router": "~0.2.13",
   "angular-cookies": "1.3.10",
   "angular-moment": "latest",
   "lodash": "latest",
   "angular-facebook": "latest",
   "angular-bootstrap": "0.12.0",
   "angular-media-queries": "~0.3.0",
   "angular-slugify": "latest",
   "angular-local-storage": "~0.1.5",
   "angular-resource": "1.3.10",
   "angular-sanitize": "~1.3.10",
   "angular-touch": "~1.3.10",
   "angular-payments": "latest",
   "angular-chosen-localytics": "~1.0.7",
   "angular-lodash": "~0.1.2",
   "angular-slick": "~0.1.18",
   "angular-ui-select": "~0.9.6",
   "angular-socialshare": "~0.0.6",
   "angulartics": "~0.17.2",
   "angular-ladda": "latest",
   "ladda": "./vendor/ladda",
   "angular-gestures": "~0.3.0",
   "ryanmullins-angular-hammer": "~2.1.10",
   "angular-bootstrap-datetimepicker": "~0.3.8",
   "angular-pretty-checkable": "~0.1.5",
   "angular-loading-bar": "~0.7.0",
   "ngImgCrop": "./vendor/ngImgCrop",
   "angular-google-places-autocomplete": "~0.2.5",
   "ng-plangular": "./vendor/ng-plangular",
   "angular-timer": "./vendor/angular-timer",
   "offline": "~0.7.11",
   "angular-swing": "*",
   "angular-strap": "~2.3.1",
   "angulike": "~1.2.0",
   "angular-summernote": "~0.4.0",
   "ckeditor": "~4.5.1",
   "ng-ckeditor": "~0.2.1",
   "angular-file-upload": "~2.1.1",
   "ng-sortable": "~1.3.0"
 },
 "devDependencies": {},
 "resolutions": {
   "angular": "1.3.15"
 }

Answer 1

我遇到了同样的问题。它可能与定义过渡时间和同一元素上具有不同时间的动画有关。例如：

.my-div {transition: .1s}

然后在其他地方：

.my-div {animation: slideIn .7s}

我发现过渡时间取代了动画...可能是由于规则的特殊性级别。由于过渡时间较短，ng-animate 类似乎没有得到应用。

Answer 2

在我的例子中，我不得不将 angular-animate 降级到 1.3 版，它开始工作了。

Answer 3

另一件要检查的事情是您的动画元素在相关的 angular 应用程序中。我有同样的问题，并追踪到动画元素被添加为文档主体的直接子元素，其中 ngApp 元素是所述动画元素的兄弟元素，类似于：

<body>
    <div id="elementToBeAnimated"></div>
    ...
    <div id="mainApp" ng-app="foo"></div>
</body>

#elementToBeAnimated div 由第三方库添加 - 将其容器 div 更改为 #mainApp 解决了问题。

ngAnimate 没有在 ui-view 中添加 ng-enter/ng-leave 类

ngAnimate not adding ng-enter/ng-leave classes inside ui-view

angularjs

angular-ui-router

ng-animate