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


}

animate-enter和animate-leave正常工作，但是animate-move不起作用，任何想法？

感谢。

Answer 1

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

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

ng-repeat

下有一个项目列表

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

Angular JS移动动画不起作用

1 个答案: