I'm facing an issue that I need help with. Here's the link to the problem: http://jsfiddle.net/mhff6u7y/3/
The problem arises when I have an array of items that are repeated and filtered. Sometimes, I animate one of those items. The issue occurs when the filter changes and the animated item should no longer be visible, but it remains until the animation completes. Can someone explain why the animated element persists instead of disappearing when the filter is changed?
Below is the code (same as on jsfiddle):
The HTML code required imports of angular.js, angular-animate.js, and 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>
The CSS code:
@-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;
}
The JavaScript code:
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'}];
});
Any insight into resolving this issue would be greatly appreciated. Thank you!