ngAnimate Parent vs Child Animations

[Sathish Kumar]

When a parent animation is in place, child animations do not get triggered.

http://plnkr.co/edit/xfkdATzHhb5uwmXvLf5y?p=preview

In angular-animate.js line no 567

```

//skip the animation if animations are disabled, a parent is already being animated,

//the element is not currently attached to the document body or then completely close

//the animation if any matching animations are not found at all.

//NOTE: IE8 + IE9 should close properly (run closeAnimation()) in case a NO animation is not found.

        if (animationsDisabled(element, parentElement) || matches.length === 0) {

          domOperation();

          closeAnimation();

          return;

        }

```

Does the above means that the child animations would be ignored if parent has a ng-animate tag?

Pardon my ignorance if this is not an issue and works as expected.

Any workarounds would be helpful.

This issue is already raised in stackoverflow(http://stackoverflow.com/questions/19492306/angularjs-1-2-nganimate-parent-vs-child)

[Nikola Yanchev]

i have the same problem, i have a ng-view enter animation (loaded template via routerprovider) and an animation inside the view, that i can't make(doesn't want) to fire. if i remove the view animation(parent animation) , the inner animation fires.

[Matthieu Larcher]

I have run into that issue too while trying to handle a ngview transition. As a workaround I resorted to do part of the animation through animate() and trigger the inner animations through a directive.
It seems to me that angular animations could be improved a lot to fit the bill when it comes to real world requirements. Clients usually want a more fine grained control over animations that what is currently possible using only .animate().
Anyhow, try to mix both animate and directives, you should be able to get at least a step further.

[Sathish Kumar]

@Matthieu
Just for clarity you have used .animate()(jquery animation) for parent and pushed the Angular Animation to the directive(child) is that it?
That's the way we had our code earlier which was working fine.
We are trying to have the animation completely controlled from Angular even for Parent.

Can we raise this as an issue and suggest a fix?
Still not clear why this check was put in the first place.
This restricts multiple animations on parent and child.

[Matthieu Larcher]

@Sathish

You are correct about the repartition of roles between .animate() and directive.

I believe animations were setup this way to prevent overlapping animations from hampering each other, and the issue has to do with how DOM manipulation is handled during the digest cycle.

Opening a ticket on the matter could be a good idea, as it appears we are not the only ones struggling with how to do things right animation-wise in the context of .animate() only. If nothing else, perhaps someone will suggest a solution that isn't clear at first sight when reading the doc.

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/oyRyggqDSgc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

[Jamie Copeland]

Totally with you on this one regarding real world applications... I can't believe that you can only trigger one level of animation at a time... For example, having a page transition in as a route, but not being able to animate anything on that page at the same time, or in the case that I'm working on at the moment, collapse some content when the page transitions in, then make it expandable later. I really didn't want to go down the animation within directive route as it's not the "Angular way", and leaves code messy and non-conventional, but I can't see any other way round this. Also I can't believe that hasn't been flagged as an issue by more people in the community. Props to the Angular guys for the rest of the system... its pretty amazing, but this feature seems to be a little lacking.