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-leftslide-right

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

你的代码变成：

_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;
        });
      }
    }
  }
}]);

检查这个样本。

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