{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 beautiful° 的问题《ngAnimate not adding ng-enter/ng-leave classes ins》','https://www.manongdao.com/q-1362571.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I have been all over the web trying to figure out the issue to my problem. I can't seem to figure out what is going on. Our application is massive so I can't really post code which sucks. I just need some direction, I've been googling the same stuff for hours.
ngAnimate is not adding the ng-enter / ng-leave etc. classes when I am adding new data to my object.
Does ngAnimate act the same when you are actually adding/removing data to an object, or does it only work when you are filtering through data?
We are using ui-router, and the body is the ui-view - does ngAnimate act the same when we are inside the ui-view?
Brief Overview (jade) - obviously there is a lot more code in our app:
body(ui-view)
script(src='/main.js')
div(ng-controller="Controller")
div.contain
div.animate(ng-repeat="item in items")
{{item.name}}
Versions:
"dependencies": {
"angular": "1.3.15",
"angular-animate": "latest",
"angular-motion": "~0.4.2",
"angular-ui-router": "~0.2.13",
...
I've even copied scripts straight in from plunker that were working plunkrs with no luck with adding the ngAnimate classes.
It's not a CSS issue because I don't even see the classes being added in the inspector.
Is there a certain version I need to be using? Certain order these need to be loaded in? Could something be disabling the ngAnimate module all together?
Thank you so much in advance for any advice.
EDIT -- I'm beginning to think it is an incompatibility issue between one or more of our components - anybody have any ideas?
Here is our bower.json file
"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"
}
I was having the same issue, sort of. It may be tied to defining a transition time and an animation on the same element with a different time. For instance:
.my-div {transition: .1s}and then somewhere else:
.my-div {animation: slideIn .7s}I found that the transition timing superseded the animation... possibly due to rule specificity levels. With a short transition timing, the ng-animate classes seem to not get applied.
Another thing to check is that your animated element is inside the relevant angular app. I had the same issue, and tracked it down the the animated element being added as a direct child of the document body, where the ngApp element was a sibling of said animated element, similar to this:
The
#elementToBeAnimateddiv was added by a third-party library - changing its container div to be inside#mainAppresolved the problem.In my case I had to downgrade angular-animate to version 1.3 and it started working.