Angular JS move animation doesn't work - css

Question

I am trying to build a slideshow using AngularJS, like this http://caroufredsel.dev7studios.com/ the one with arrows (next and prev).
here is the HTML code:
<div class="carousel">
<div class="left"><input type="button" value="Back" ng-click="slideBack()" ng-disabled="currentSlide == 0" /></div>
<div class="content">
<div class = "slide" ng-repeat="img in imgs | startFrom:currentSlide | limitTo:slidesSize" ng-animate="{enter: 'animate-enter', leave: 'animate-leave', move: 'animate-move'}">
<img ng-src="{{img.url}}" />
</div>
</div>
<div class="right"><input type="button" value="Next" ng-click="slideNext()" ng-disabled="currentSlide+slidesSize >= imgs.length" /></div>
</div>
CSS:
.animate-enter, .animate-move, .animate-leave
{
-webkit-transition: 1000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-moz-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-ms-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-o-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
}
.animate-enter {
left: 400px;
position:relative;
opacity: 0;
}
.animate-enter.animate-enter-active {
left: 0px;
opacity: 1;
}
.animate-move {
position:relative;
}
.animate-move.animate-move-active{
left: -200px;
}
.animate-leave {
left: 0;
}
.animate-leave.animate-leave-active{
left: -100%;
position:absolute;
}
Here is the Filter:
angular.module('carouselFilters', []).filter('startFrom', function() {
return function(input, start) {
start = +start;
return input.slice(start);
}
});
Controller:
function carouselCtrl($scope, $http) {
$scope.currentSlide = 0;
$scope.slidesSize = 3;
$http.get('carousel_images.json').success(function(data) {
$scope.imgs = data;
});
$scope.slideNext = function(){
$scope.currentSlide++;
}
$scope.slideBack = function(){
$scope.currentSlide--;
}
}
The animate-enter and animate-leave work properly, but the animate-move doesn't work, any idea ?
Thanks.

Answer 1

enter for when a DOM element is added into the repeat list.
leave for when a DOM element is removed from the repeat list.
move for when a DOM element is moved from one position in the repeat list to another position.
I started from an example from nganimate.org.
There is a list of items under ng-repeat
line 21: <li ng-animate="'animate'" ng-repeat="name in names | filter:search">
Under style.css I just used the same css that you did.
I created a simple button that would shuffle the li's around using _.shuffle and it does the animation you described.
<button ng-click="shuffle()">Shuffle the List</button>
I think its more that you are adding/removing to the repeat list and not actually moving elements? Hope that makes sense.
Sorry it saved the wrong one - http://plnkr.co/edit/ZXkwx7Skuy42ndWexMt0