search

homerjam / angular-ui-router-anim-in-out

An animation directive to use with ngAnimate 1.2+ and ui-router
http://homerjam.github.io/angular-ui-router-anim-in-out/
234 stars 49 forks source link

Animations not trigerred in production env #6

Closed grabbou closed 9 years ago

grabbou commented 9 years ago

Hi, Thanks for amazing plugin, works flawlessly. Unfortunatelly, my animations are not triggering on first initial load when app is compiled into one file. I've noticed that if app loads too fast then the animations are skipped. Do you have any ideas?

homerjam commented 9 years ago

Actually I think thats desired behaviour - but its strange that its working differently per environment. My guess that some delay in the dev environment (loading, bootstrapping etc) is causing the transitions to be triggered mistakenly.

To resolve your problem I would suggest manually triggering the initial transition, or perhaps transitioning to/from a blank state/view.

grabbou commented 9 years ago

@homerjam thanks for quick response. Actually, I think it's due to desired behaviour of Angular -> https://github.com/angular/angular.js/issues/5130. Fortunately there's a quick fix (monkey patch but worth giving a go) that does the trick.

It turns out that digest cycle runs somehow when dependencies and app files are separate (~70 GET reuests in the background) which is no long a case in production environment when everything is located inside one file.

homerjam commented 9 years ago

Ah, interesting - I've never come across that myself. I'll add a note in the readme. Thanks

grabbou commented 9 years ago

No worries, thanks again! It's quite funny that they did that to disable first-load animations, but it's probably because they didn't want e.g. ng-repeat to animate on load (as it has no elements so enter animation is useless).

As you can see from the message above, they monkey patch $rootElement with animation attribute.

Actually, we might create another directive attribute animate-on-load="true" and try to set $element.data('$$ngAnimateState').running = false; instead of changing $rootElement behaviour by default, so maybe somehow it will work for selected elements only (e.g. animate left sidebar on page load with anim-in animations specified but right sidebar should animate only after digests run). That might work better if one have other animations inside container (ng-repeat for instance)