ngAnimate - Incorrect detection of transition end (too early / never)

[mik01aj]

See example: http://plnkr.co/edit/jYpCeL?p=preview

The div should have 1s transition on width and then 1s transition on background. In the example, only the first transition works. Perhaps Angular reacts to the transitionend event too quickly?

I'm using version v1.2.0-4aa9d2a (the latest master). Tested on Chrome 31 and Firefox 23 on Linux.

[mik01aj]

another example: http://plnkr.co/edit/dGUDfnDf8T2FljJZKTjl?p=preview - here the transitionend event is never fired, and ngAnimate thinks that transitions last forever. This is really nasty when used within ng-repeat - this prevents element removal (element has classes ng-leave ng-leave-active and stays there forever).

[mgol]

This is a really nasty bug, IMO it should be fixed for rc3.

[krsreenatha]

yep .......

[mik01aj]

Hmm, I just noticed that my both link to plunks point to the same one, so I updated the first one (in issue description). You're welcome to have a look :)

[matsko]

Looks like it's working now:

https://s3.amazonaws.com/angularjs-dev/animation-delay-fix/example/broken.html

Here's the PR:

#4150

[mik01aj]

@matsko , does it address also the issue demonstrated by the second example (waiting forever for transition end)?

[matsko]

@mik01aj that's expected. Although the error should be properly handled. What goes on is that ngAnimate forcefully skips the first transition CSS class (in this case -add and -remove) and then sets the events while the 2nd class is added (in this case -add-active and -remove-active). This way the first class CSS styles are always applied instantly and the next styles are always animated. This means that you'll never get any transition events for when the first CSS class is added. And no transition behaviour will occur unless there are any styles present in the active class (therefore no events).

The only solution to capture the error is to use a $timeout to guard the entire animation. But timeouts suffer from when the browser takes too long to prepare an animation and using timeouts again in the code would ruin the tests. So we can't do that. There may be a solution regarding the transitionProperty fix that was placed back when ngClass was having bugs: 36ad40b#L0R624 but this will need to wait for the time being.

[matsko]

@mik01aj I'm happy to focus on fixing the issue that you found out in your example in another issue, but let's leave this one as is for now so that 1.2 can get released earlier :)