0

我正在尝试使用 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 不起作用，知道吗？

谢谢。

4

1 回答 1

0
  • enter 用于将 DOM 元素添加到重复列表中。
  • 当从重复列表中删除 DOM 元素时离开。
  • move for 当 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

于 2013-07-13T15:46:59.053 回答