ngAnimate 没有在 ui-view 中添加 ng-enter/ng-leave 类
ngAnimate not adding ng-enter/ng-leave classes inside ui-view
我一直在网上寻找解决我的问题的方法。我似乎无法弄清楚发生了什么。我们的应用程序非常庞大,所以我真的无法 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"
}
我遇到了同样的问题。它可能与定义过渡时间 和 同一元素上具有不同时间的动画有关。例如:
.my-div {transition: .1s}
然后在其他地方:
.my-div {animation: slideIn .7s}
我发现过渡时间取代了动画...可能是由于规则的特殊性级别。由于过渡时间较短,ng-animate 类 似乎没有得到应用。
在我的例子中,我不得不将 angular-animate 降级到 1.3 版,它开始工作了。
另一件要检查的事情是您的动画元素在相关的 angular 应用程序中。我有同样的问题,并追踪到动画元素被添加为文档主体的直接子元素,其中 ngApp 元素是所述动画元素的兄弟元素,类似于:
<body>
<div id="elementToBeAnimated"></div>
...
<div id="mainApp" ng-app="foo"></div>
</body>
#elementToBeAnimated
div 由第三方库添加 - 将其容器 div 更改为 #mainApp
解决了问题。
我一直在网上寻找解决我的问题的方法。我似乎无法弄清楚发生了什么。我们的应用程序非常庞大,所以我真的无法 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"
}
我遇到了同样的问题。它可能与定义过渡时间 和 同一元素上具有不同时间的动画有关。例如:
.my-div {transition: .1s}
然后在其他地方:
.my-div {animation: slideIn .7s}
我发现过渡时间取代了动画...可能是由于规则的特殊性级别。由于过渡时间较短,ng-animate 类 似乎没有得到应用。
在我的例子中,我不得不将 angular-animate 降级到 1.3 版,它开始工作了。
另一件要检查的事情是您的动画元素在相关的 angular 应用程序中。我有同样的问题,并追踪到动画元素被添加为文档主体的直接子元素,其中 ngApp 元素是所述动画元素的兄弟元素,类似于:
<body>
<div id="elementToBeAnimated"></div>
...
<div id="mainApp" ng-app="foo"></div>
</body>
#elementToBeAnimated
div 由第三方库添加 - 将其容器 div 更改为 #mainApp
解决了问题。