Angular JS移动动画不起作用

我想用AngularJS建立一个幻灯片，就像这个http://caroufredsel.dev7studios.com/带箭头的那个（next和prev）。Angular JS移动动画不起作用

这里是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--; 
    } 


}

动画输入和动画离开工作正常，但动画移动不起作用，有什么想法？

谢谢。

来源

2013-07-13 AhlyM

当DOM元素被添加到重复列表中时输入。
离开DOM元素从重复列表中删除。
移动DOM元素从重复列表中的一个位置移动到另一个位置。

我从一个nganimate.org的例子开始。

有下NG重复

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

项目列表下的style.css我只是用你做了相同的CSS。

我创建了一个简单的按钮，可以使用_.shuffle来搅动li，并且它执行您描述的动画。

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

我认为它更要添加/删除的重复列表，而不是实际移动元素？希望这是有道理的。

对不起它保存了错误的 - http://plnkr.co/edit/ZXkwx7Skuy42ndWexMt0

来源

2013-07-13 15:46:59 hzoo

，但即使我添加/删除的重复名单，是不是意味着增加/删除的项目会留动画处理或进入，阿尼姆？问题是，新项目或离开的项目与动画，已经没有改变的项目工作正常，改变他们的位置没有动画。 – AhlyM

我认为是这样的情况：移动 - 当一个相邻的物品被过滤出来导致重新排序。我的过滤器删除第一个元素，并导致重新排序！ – AhlyM

Angular JS移动动画不起作用

回答

相关问题