How to make animations reliable in any context

[morewry]

I have a scenario where I'm distributing directives that represent UIs like dropdowns and modal dialogs. These directives come with styles, including animations, built-in. The animations rely on ngAnimate. When these directives are used alone or in extremely simple situations, they appear to work as desired.

However, when the directives are composed into a more complex application contexts or are used to build new, more complicated directives, the animations no longer play as desired. Most especially, there are extremely common situations, such as when these directives are descendants of any element that uses ngIf or ngShow, where problems arise. It sounded like ngAnimateChildren would help, but it does not behave as I expected.

I have created reduced test cases here: http://codepen.io/morewry/pen/VvwbrO

[matsko]

ngAnimate 2.0 has a different approach on this and the goal is to get it to work with Angular 1 and Angular 2. The idea here is that we have a new way of crafting together multi DOM node animations in a better way than with the current version of ngAnimate. Have a look at this video to get an understanding of how the new system works: https://www.youtube.com/watch?v=izp5N2eeogg