Угловая анимация перемещения JS не работает

Question

Я пытаюсь создать слайд-шоу с помощью AngularJS, например http://caroufredsel.dev7studios.com/ со стрелками (далее и далее).

вот HTML код:

<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; 
} 

Вот фильтр:

angular.module('carouselFilters', []).filter('startFrom', function() { 
    return function(input, start) { 
     start = +start; 
     return input.slice(start); 
    } 
}); 

Контроллер:

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--; 
    } 


} 

Работает в режиме анимации и анимации, но анимация-движение не работает, любая идея?

Спасибо.

Answer 1

• введите, когда элемент DOM добавлен в список повторов.
• оставить, когда элемент DOM удален из списка повторов.
• Перемещение, когда элемент DOM перемещается из одной позиции в списке повторов в другое положение.

Я начал с примера из nganimate.org.

Существует список предметов под нг-повторе

line 21: <li ng-animate="'animate'" ng-repeat="name in names | filter:search"> 

Под style.css я просто использовал тот же CSS, что вы сделали.

Я создал простую кнопку, которая перемешала бы li с помощью _.shuffle, и это анимация, которую вы описали.

<button ng-click="shuffle()">Shuffle the List</button> 

Я думаю, что это больше, что вы добавляете/удаляете в список повтора, а не на самом деле перемещаете элементы? Надеюсь, это имеет смысл.

К сожалению это спасло неправильный один - http://plnkr.co/edit/ZXkwx7Skuy42ndWexMt0