Jerky interrupted CSS transitions with ngAnimate on Chrome

Question

I've noticed that with ngAnimate loaded CSS transitions are "jerky" on Chrome when interrupted with another transition. That is, they seem to jump ahead to the target state, rather than start from the current value. The exact same transitions are much smoother without ngAnimate loaded, and smoother on Firefox with/without ngAnimate.

For example, a simple element that adds/removes a class on click:

<bigger-on-click-class class="{{showBigger ? 'bigger' : ''}}" ng-click="showBigger = !showBigger"></bigger-on-click-class>

animated by the CSS transition:

bigger-on-click-class {
  display: block;
  height: 200px;
  width: 200px;
  background: red;
  -webkit-transition: height 5s;
  transition: height 5s;
}

bigger-on-click-class.bigger {
  height: 400px;
}

behaves differently on multiple clicks in quick succession, depending on whether ngAnimate is loaded:

http://plnkr.co/edit/Fhwbd3WRiz5wHRIm10y3?p=preview without ngAnimate http://plnkr.co/edit/WSED064MV2dtPnsEQuti?p=preview with ngAnimate

If you try clicking quickly multiple times on the red boxes in the previous examples, you should see what I mean, or click below to view a screencast.

Other than not loading ngAnimate, is there a way to avoid this, so interrupting animations start from the currently displayed value/position?

Edit: the initial links were incorrect. Also, the jerky behaviour is observed in Chrome, but not Firefox. Edit: reframed the question to make it clearer it's a Chrome/Firefox difference

Answer 1

I noticed when the animation occurs the style is being set to:

transition: none;
-webkit-transition: none;

I assume ngAnimate sets these style properties during it's processing and the other browsers are unaffected by them during the brief moment they are set but when chrome sees them it immediately completes the animation as though no transition was applied.

So to fix your problem you just need to ensure these properties get ignored by setting your properties as !important:

transition: height 5s !important;
-webkit-transition: height 5s !important;

Which can be seen working in the plnkr here

Answer 2

One way of avoiding the jerkiness: upgrade to Angular 1.3. To quote Angular 1.3 beta 7 ngAnimate docs

Earlier versions of ngAnimate may have caused natural CSS transitions to break and not render properly due to $animate temporarily blocking transitions using 0s none

And the difference can be seen in my Plunker using Angular 1.3 beta 7

Answer 3

In my case the problem was because ng-hide css class was set to display:none and the animation didn't work in chrome, but it works in safari.