AngularJS Animation on Index Change - angularjs

Question

I'm having an issue working with AngularJS and CSS3 animations.
I currently have a ng-repeat of items that are styled depending on their index. I have the appropriate CSS3 animation properties in place, but I can't seem to get the items to animate when the $index of each item changes (through orderBy).
Here's my ng-repeat list:
<li ng-repeat="video in videos | orderObjectBy:'order'" ng-style="{left: (($index * 160) + ($index * 15) + 'px')}">
{{ video.title }}
</li>
My CSS3:
ul li {
-webkit-transition: all 3s ease !important;
-moz-transition: all 3s ease !important;
transition: all 3s ease !important;
}
My orderObjectBy filter:
.filter('orderObjectBy', function(){
return function(input, attribute) {
if (!angular.isObject(input)) return input;
var array = [];
for(var objectKey in input) {
array.push(input[objectKey]);
}
array.sort(function(a, b){
a = parseInt(a[attribute]);
b = parseInt(b[attribute]);
if (!a && b) return 1;
else if (a && !b) return -1;
else if (a === b) return 0;
else return (a > b) ? 1 : (b > a ? -1 : 0)
});
return array;
}
});
And here's a JSFiddle: http://jsfiddle.net/jakemulley/Y8L5L/
As you can see in the JSFiddle, when you click on a video, it "jumps" to the front, because its index is changed. This is what I want to animate - instead of it jumping.
Any ideas?
Thanks guys!

Answer 1

You must configure your animation CSS code before, as animations guide says, and you're using ngRepeat, so, you should read this: https://docs.angularjs.org/api/ng/directive/ngRepeat#usage_animations.
See a Plunker: http://plnkr.co/edit/VXg7x0PXDyNw5YEbbDLI. On my Plunker I am using a ngRepeat too, so you should see the example after read.