Animated element angular not disappearing

Question

this is basically my problem: http://jsfiddle.net/mhff6u7y/3/

I have and array of items repeated and filtered, sometimes I animate one of those items. Problem is when the filter changes, and the animated item should not show anymore, the item stays until it finishes the animation. So yeah, why does the animated element stay and not disappear when I change the filter?

Code (same as jsfiddle):

HTML (Needs imports: angular.js, angular-animate.js, animate.min.css):

<div ng-controller="MyCtrl">
    <label>
      <input type="number" min="1" max="3" ng-model="choice.number" />
   </label>
  <br>
    selected number: {{ choice.number }}
    <div class="loader">
      <div class="item" 
           ng-repeat="item in list | filter: { number:choice.number}" 
           ng-class="{'animated':item == animatedItem}"
           ng-click="animatedItem = item;">
        {{item.text}}
      </div>
  </div>
</div>

css:

@-webkit-keyframes myanimation{
    0% { opacity: 1.0; }
    50% { opacity: 0.5; }
    100% { opacity: 1.0; }
}
.loader {
    position: absolute;
    top: 100px;
    left: 100px;
    padding: 5px;
    border-radius: 2px;
    background: #eee;
}
.item {
    margin: 5px;
    border-radius: 2px;
    background-color: #808080;
}
.animated {
    animation-name: myanimation;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: 50;

    -webkit-animation-name:myanimation;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 50;
}

JavaScript:

var myApp = angular.module('myApp',['ngAnimate']);

myApp.controller('MyCtrl', function($scope) {
    $scope.isThinking = true;
    $scope.animatedItem = {};
    $scope.list = [{'number': 1, 'text': 'item1'},
                  {'number': 1, 'text': 'item11'},
                  {'number': 1, 'text': 'item111'},
                  {'number': 2, 'text': 'item2'},
                  {'number': 2, 'text': 'item22'},
                  {'number': 2, 'text': 'item222'},
                  {'number': 3, 'text': 'item3'},
                  {'number': 3, 'text': 'item33'},
                  {'number': 3, 'text': 'item333'}];
});

Thanks in advance

Answer 1

Got my answer here: https://github.com/angular/angular.js/issues/13436

Answer:

'This is not a bug, it's the way ngAnimate works. The animation on .animated is picked up by the ngRepeat, and interpreted as the leave animation, that's why the element stays until the animation has finished. This is because ngAnimate allows having multiple animations at the same time. So in order to not confuse the animation engine, you should exclude specific "structural" animations from your styles, see here: http://plnkr.co/edit/onBcM37KxV2X3S5SgtuX?p=preview '

So basically add ':not(.ng-leave)' to the css:

.animated:not(.ng-leave) {
    animation-name: myanimation;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: 50;

    -webkit-animation-name:myanimation;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 50;
}