angularjs - ngAnimate - 双向滑动

Question

我正在努力解决一个问题:我有一个包含 x 数量项目的菜单。
在这个例子中，我有三个项目。

每个项目都有一个内容部分，因此通过单击菜单项，内容应该滑入。

到目前为止，我所取得的成就是，当您从“项目 1”开始并更改为“项目 2”时，将执行动画(从右向左滑动，就像幻灯片一样)

但我也想要相反的效果，所以当从“项目 2”到“项目 1”时，它会从右向左滑动。
我只是无法弄清楚如何以两种方式做到这一点。

所以我要求的是某种带有 ngAnimate 的轮播，所以我不必为这些动画恢复到 jQuery。我想在使用 AngularJS 时从我的项目中删除 jQuery。

console.clear();
var _app = angular.module("animate", ['ngAnimate']);

_app.directive("animate", [function() {
  return {
    scope: {},
    template: '<div class="header">' +
      '		<ul>' +
      '			<li data-ng-repeat="item in items" data-ng-click="move($index)">' +
      '				<div>{{item}}</div>' +
      '			</li>' +
      '		</ul>' +
      '</div>' +
      '<div class="wrapper" style="position: relative; margin-top: 20px;">' +
      '		<div data-ng-if="index == 0" class="slide slide-left">Content 1</div>' +
      '		<div data-ng-if="index == 1" class="slide slide-left">Content 2</div>' +
      '		<div data-ng-if="index == 2" class="slide slide-left">Content 3</div>' +
      '</div>',
    link: function(scope, elem, attr) {
      scope.items = ["Item 1", "Item 2", "Item 3"]
      scope.index = 0;

      scope.move = function(index) {
        scope.index = index;
      }
    }
  }
}]);

body {
  font-family: Arial, Sans-Serif;
}

.header {
  width: 100%;
  height: 50px;
  background-color: lightblue;
  position: relative;
}

.header ul {
  padding: 0;
  height: inherit;
}

.header ul li {
  display: inline;
  width: 33%;
  height: inherit;
}

.header ul li div {
  float: left;
  width: 33%;
  text-align: center;
  height: inherit;
  border: 1px solid black;
}

.slide {
  -webkit-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
  -moz-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
  -o-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
  transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
  position: absolute;
}

.slide-left.ng-enter {
  left: 100%;
}

.slide-left.ng-enter.ng-enter-active {
  left: 0;
}

.slide-left.ng-leave {
  left: 0;
}

.slide-left.ng-leave.ng-leave-active {
  left: -100%;
}

.slide-right.ng-enter {
  left: -100%;
}

.slide-right.ng-enter.ng-enter-active {
  left: 0
}

.slide-right.ng-leave {
  left: 0;
}

.slide-right.ng-leave.ng-leave-active {
  left: 100%;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-animate.js"></script>
<div ng-app="animate">
  <animate></animate>
</div>

Answer 1

为了有轮播效果，你需要根据你要过渡到的索引来切换幻灯片类，所以你使用ngClass并从 slide-left 更改类(class)至slide-right当移动到较低的索引时，反之亦然。

然而，对于消失的元素 ngIf在类更新之前隐藏元素，因此您需要延迟转换以确保 ngClass首先执行。一种方法是使用 $timeout函数，需要将其注入(inject)您的指令中。

您的代码变为:

_app.directive("animate", ['$timeout', function($timeout) {
  return {
    scope: {},
    template: '<div class="header">' +
      '     <ul>' +
      '         <li data-ng-repeat="item in items" data-ng-click="move($index)">' +
      '             <div>{{item}}</div>' +
      '         </li>' +
      '     </ul>' +
      '</div>' +
      '<div class="wrapper" style="position: relative; margin-top: 20px;">' +
      '     <div data-ng-if="index == 0" class="slide" ng-class="slideClass">Content 1</div>' +
      '     <div data-ng-if="index == 1" class="slide" ng-class="slideClass">Content 2</div>' +
      '     <div data-ng-if="index == 2" class="slide" ng-class="slideClass">Content 3</div>' +
      '</div>',
    link: function(scope, elem, attr) {
      scope.items = ["Item 1", "Item 2", "Item 3"]
      scope.index = 0;
      scope.slideClass = 'slide-left';

      scope.move = function(index) {
        scope.slideClass = index < scope.index
                         ? scope.slideClass = 'slide-right'
                         : scope.slideClass = 'slide-left';

        $timeout(function() {
          scope.index = index;
        });
      }
    }
  }
}]);

查看 this sample .

此外，如果您已经拥有 UI Bootstrap您可能想尝试他们的轮播组件。