1.2-rc2 breaks animation steps in example

[malixsys]

Animation restarts from scratch in
http://plnkr.co/edit/JX3qUkMqp7AdVeeXAj9r?p=preview

works properly in
http://plnkr.co/edit/oqIWoYimcYAArRMCKo4V?p=preview

[sod]

Yeah, there is actually a difference in the className change behavior on $animate.addClass() and $animate.removeClass():

RC1
- init
-- className: my-slide-animation
- click [ $animate.addClass( 'step-1' ), $animate.removeClass( 'step-0' ) ]
-- className: my-slide-animation step-1-add
-- className: my-slide-animation step-1-add step-0-remove-active step-1-add-active
-- className: my-slide-animation step-1
- click [ $animate.addClass( 'step-0' ), $animate.removeClass( 'step-1' ) ]
-- className: my-slide-animation step-0-add
-- className: my-slide-animation step-0-add step-1-remove-active step-0-add-active
-- className: my-slide-animation step-0-add step-0-add-active
-- className: my-slide-animation step-0

RC2
- init
-- className: my-slide-animation
- click [ $animate.addClass( 'step-1' ), $animate.removeClass( 'step-0' ) ]
-- className: my-slide-animation step-1-add step-1-add-active
-- className: my-slide-animation step-1
- click [ $animate.addClass( 'step-0' ), $animate.removeClass( 'step-1' ) ]
-- className: my-slide-animation step-0-add step-0-add-active
-- className: my-slide-animation step-0

However ... if you move the transition:0.5s linear all to .my-slide-animation it works just fine. See http://plnkr.co/edit/EEwU2p1ThtzkgqjsMR4i?p=preview

[matsko]

@malixsys the new behaviour is expected. Basically if you call addClass() and then removeClass() right after (or vice-versa) then it will cancel the former animation when the new animation takes place. With RC1 $animate was using timeouts to manage the animation boundaries and that's why the remove class happened just after the addClass was called (instead of right before). This isn't the case anymore with RC3+ since it doesn't use timeouts anymore.

In this case you wold just remove the former CSS class once the addClass animation has done it's thing.

var remove = 'step-' + currentStep;
currentStep = currentStep == 0 ? 1 : 0;
var add = 'step-' + currentStep;
$animate.addClass(element, add, function() {
  element.removeClass(element); //no $animate, just element
});

This works, but there is a 1ms flicker at the end of the animation when the class is removed. Which is small bug with the $animate callbacks. I will work on a fix for that.

[matsko]

@sod the RC2 code you have in your example is cancelling out the animation since the base CSS class already has transitions on it. By the time -add and -add-active are attached to the element then it doesn't perform the ngAnimate animation at all since it thinks the element already has it's own native CSS3 animation going on. So while the hack prevents the animation from happening it still isn't a recommended practice.

[matsko]

@malixsys @sod going to have to move the milestone to 1.2.1 since I need to refactor ngAnimate around anyways. The fix for 1.2.0 is really messy and everything internally needs to be recoded. Sorry for the change. I will get to fixing this once 1.2 is out next week.

[sod]

Take your time. Your work on ng-animate is amazing :)