Angular 1.2.5 nested animations

Question

Using ng-view, I would like a simple fadeIn / fadeOut for page transitions. However, in different "views" I have child elements that I would like to animate at the same time as the fadeIn/fadeOut are happening on the parent element. The problem is, that angular cancel's any nested animations if the parent is animating. Why is this? Is there another way to achieve what I want?

Nissie

I've been trying to figure out this as well. So far no luck but one thing that sort of worked is delaying the route change to do the animation then change the route. Other than that I had some success using reloadOnSearch on the $route config so that it maintains the same controller instance. Have you tried doing animations relative to the parent is CSS? – Nainsook

have you try with $timeout? – Eal

Have you tried the attribute ng-animate-children? – Furfural

Can you post a sample (fiddle/plunker/etc)? – Hail

Answer 1

You should be able to use the $animate service instead of ngAnimate. If you do this, you can chain the animations with a promise.

https://docs.angularjs.org/api/ngAnimate/service/$animate

Uriia

This answer should be improved with an example. – Disable