Animating movement of other items in ng-repeat with ngAnimate - angularjs

Question

Sorry for the vague title, but I couldn't find a fitting short description.
So, I have a list of different items which I'm using ng-repeat to show. Some of them might be removed or added to that list.
I'm using ng-enter etc to animate the transition of the items entering and exiting the view. The problem is, the rest of the items, the ones that are not being added or removed, look like they hop and skip around instead of flowing naturally when items between them are being removed or added.
I made a codepen:
If you click any of the players, you remove them. Click reset to bring them back in. If you remove any of the players in the middle, you can see they jump to the left instantly after the removed item is done with its animation. I would like it to slide over to it's new position instead.
http://codepen.io/utrolig/pen/oxQVVZ
HTML:
<div ng-app="test">
<div ng-controller="AnimateController as vm">
<div class="player" ng-repeat="player in vm.items" ng-click="vm.toggleActiveState(player)" ng-if="player.active">
<div class="imgcont">
<img ng-src="{{player.img}}" />
<div class="jerseyno">
<span>#{{::player.jerseyNumber}}</span>
</div>
</div>
<div class="playername">
<span ng-bind="::player.name"></span>
</div>
</div>
<div class="resetbutton" ng-click="vm.resetActiveState(vm.players)">
<span>Reset</span>
</div>
</div>
</div>
JS:
(function(){
'use strict';
angular
.module('test', ['ngAnimate'])
.controller('AnimateController', AnimateController);
function AnimateController(){
var vm = this;
vm.toggleActiveState = toggleActiveState;
vm.resetActiveState = resetActiveState;
vm.items = [
{
name: "Pavel Bure",
active: true,
team: "Vancouver Canucks",
jerseyNumber: 10,
img: "https://nhl.bamcontent.com/images/headshots/current/168x168/8455738.jpg"
},{
name: "Wayne Gretzky",
jerseyNumber: 99,
active: true,
team: "Vancouver Canucks",
img: "https://nhl.bamcontent.com/images/headshots/current/168x168/8447400.jpg"
},{
name: "Jaromir Jagr",
jerseyNumber: 68,
active: true,
team: "Florida Panthers",
img: "https://nhl.bamcontent.com/images/headshots/current/168x168/8448208.jpg"
},{
name: "Mats Zuccarello",
jerseyNumber: 36,
active: true,
team: "New York Rangers",
img:"https://nhl.bamcontent.com/images/headshots/current/168x168/8475692.jpg"
}
];
//////////////
function toggleActiveState(item){
item.active = item.active ? false : true;
}
function resetActiveState(arr){
for (var i = 0; i < vm.items.length; i++){
vm.items[i].active = true;
}
}
}
})();
CSS:
body, html {
min-height: 100vh;
position: relative;
font-family: 'Arial', sans-serif;
background: #1d1f20;
color: rgba(255,255,255,0.7)
}
.imgcont {
border-radius: 8px;
}
.imgcont img {
border-radius: 8px;
}
.jerseyno {
position: absolute;
top: 6px;
right: 6px;
padding: 4px;
background: rgba(0,0,0,.75);
border-radius: 4px;
}
.resetbutton {
display: block;
float: left;
border-radius: 4px;
margin: 24px;
padding: 24px;
background: rgba(0,0,0,.5);
cursor: pointer;
}
.playername {
position: absolute;
bottom: 6px;
left: 6px;
background: rgba(0,0,0,.75);
padding: 4px;
border-radius: 4px;
}
.player {
float: left;
margin-right: 12px;
position: relative;
cursor: hand;
cursor: pointer;
transition: .5s all;
}
.player.ng-enter {
opacity: 0;
transform: translateY(-50%);
}
.player.ng-enter-active {
opacity: 1;
transform: translateY(0%);
}
.player.ng-leave-active {
opacity: 0;
transform: translateY(-50%);
}
Thanks!