Angular.js: ngAnimate incorrectly waits before removing ngRepeat elements

[kamilkp]

I have an ngRepeat with elements that have a transition of 0.5s to animate background-color on hover. However ngAnimate waits this period of time (500ms) before removing the elements from the DOM.

Example fiddle here: http://jsfiddle.net/5e6uq/1/
Try pressing enter several times (or any other keyboard key) whilst having focus on the input. On each keydown I clear the ngRepeat array, and append two elements to it.

[lgalfaso]

It is my understanding that this works as expected. Can you please post why you think this is a bug?

[kamilkp]

Like I said, I have this transition defined in order to obtain a smooth transitioning between background color on hover. I don't want any delays in when I change the ngRepeat model array.

[lgalfaso]

@kamilkp you need to add a 0s transition on leave like this

.repeater.ng-leave{
    transition: 0s;
}

[kamilkp]

It's not very convenient that I have to add something like this to every element that I have ngRepeat on and some transition. I think ngRepeat should only wait for the transition that's been defined in .ng-leave explicitly.

[lgalfaso]

I do not think there is a way to know if the transition comes from the element with or without the ng-leave class. @matsko can you please comment on this issue?

[matsko]

The JS API for detecting animations (via getComputedStyle) is very limited. There is no direct way to see if a CSS class is defined and if the CSS class has triggered a transition to kick off. Therefore if you define a transition on an element's base CSS class then ngAnimate will attempt to wait for the animation to take off for the duration of the transition.

In the case of a hover, a CSS property that needs to be defined on the base CSS class. NgAnimate will still try and perform an animation. A quick fix is to a add a similar fix that @lgalfaso pointed out, only on the .ng-animate CSS class:

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

Unfortunately right now there isn't a better solution. Hopefully we can find a way to detect if a transition has been activated on an element.

[matsko]

@kamilkp you can also use $animateProvider.classNameFilter and setup a prefix of .animate- so that you don't have to do this across your entire application.

[kamilkp]

Could you post a working example piece of code that would do that? I mean the $animateProvider.classNameFilter solution.

[matsko]

http://plnkr.co/edit/ytJ78SbAAn0Bhrd55Ukz?p=preview

[matsko]

Closing this for now since there isn't a fixable solution.