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: ``` ``` 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 `n…

Accepted Answer

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

Jerky interrupted CSS transitions with ngAnimate on Chrome

Solution

Problem