$animator: chaining or cancelling animations (show/hide)

[olostan]

Currently there is no way to cancel/chain animations.

This leads to unexpected behaviour: if you have some elements under ngShow and quickly change expression (not waiting until animation is finished) you'll have your elements hidden even if ngShow expression is true.

Here is example: http://plnkr.co/edit/67Q96KmExV78Kd84tq4g?p=preview - wait until elements will show and quickly toggle checkbox (on and off) and you'll see that no elments would be shown.

I assume the solution should be to stop animation on element (so removing all added classes in case of CSS3) AND call afterFn button in case if new animation is about to be started. Or there is better solution (chaining of animations?)

[olostan]

Tested with AngularJS v1.1.5-570463a - issue still actual. Updated plunker.

[matsko]

Animations are cancelled as soon as another animation is called in 1.1.5. Chaining them isn't supported yet. However there are plans for 1.1.6 with promises since 1.1.5 supports custom animations.

[pdf]

The real pain-point here is that ngShow/ngHide can land in an inconsistent state if, for example, there is animation in only one direction (hide or show), and the expression changes while the animation is in progress. This means that elements can end up permanently hidden because there is no secondary animation to trigger cancellation of existing, in-progress animations, and the show/hide state never gets updated (or, more precisely, for ngHide, the element is still hidden on the back of the animation even though the expression changed to falsy while the animation was in progress, and vice-versa for ngShow).

This could be handled by one if the proposed animation completion callbacks, but it shouldn't need to be handled in client code IMO.

[matsko]

Fixed with PR: #4612

Here's the working code:
http://plnkr.co/edit/vMgX3H9r9nlMbKxZOzBL?p=preview

[matsko]

Landed as #2332