ngAnimate - long animation-times on 1 of 2 ng-repeats causes stale elements in 2nd ng-repeat

[intellix]

I was having an issue that elements were getting left behind for 10 seconds and after lots of debugging, traced it back to accidentally leaving a 10 second animation-time on a menu which changes the dataset.

So: a long animation-time on a 1 of 2 ng-repeats will cause the 2nd ng-repeat to contain stale data for the duration of the 1st animation-time... but hovering over them makes them disappear

Example: http://codepen.io/intellix/pen/jExyPe

1. Click a button (change the dataset)
2. You'll notice the data-set in a separate ng-repeat goes stale (hovering over the stale elements makes them disappear).

I would have asked if this was expected behaviour, but hovering over the elements to make them disappear makes me doubt that

[petebacondarwin]

@matsko can you take a look to see if this is still an issue with the new animation engine?

[matsko]

@intellix this bug is due to a limitation of what we can do with JavaScript detection of CSS. Long story short, ngAnimate doesn't know if the developer (you) intentionally set there to be a transition for ALL animations or just enter/leave since the transition value is inherited through to the element at the time of all the animations.

To fix this you need to have Angular skip animations for enter, leave or for all ngAnimate-triggered animations:

li.ng-animate {
  transition: 0s none;
}

article.ng-animate {
  transition: 0s none;
}

(the code still works in 1.4, but there is a pending PR which fixes an issue with the .ng-animate CSS class application #11807).

This should be better documented in both 1.3 and 1.4. I've created an issue that points that out.

I'm closing this issue since there is nothing we can do other than look out for this bug. Hopefully Angular 2.0 and maybe 1.5 can figure out a better way to detect this.