ngAnimate - 双向滑动

Question

我遇到了一个问题：我有一个包含 x 项的菜单。在这个例子中，我有三个项目。

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

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

但是我也想要反向效果，所以从"item 2"到"item 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

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

然而，对于消失的元素 ngIf 在更新 class 之前隐藏元素 ，因此您需要延迟转换以确保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; }); } } } }]);

检查this sample。

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

ngAnimate - 双向滑动

ngAnimate - Sliding both ways

angularjs

ng-animate