6

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?

Dalorzo
  • 19,834
  • 7
  • 55
  • 102
Ben
  • 291
  • 1
  • 3
  • 16
  • 1
    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? – dmcqu314 Dec 08 '14 at 19:56
  • 1
    have you try with $timeout? – syarul Dec 13 '14 at 18:22
  • Have you tried the attribute [`ng-animate-children`](https://docs.angularjs.org/api/ngAnimate)? – Dr G. Dec 23 '14 at 12:18
  • Can you post a sample (fiddle/plunker/etc)? – David Pisoni Feb 09 '15 at 21:23

1 Answers1

0

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

Jacqueline
  • 1