Question

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

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

到目前为止，我所取得的成就是当你从＆＃34;项目1＆＃34;并改为＆＃34;项目2＆＃34;会做动画（从右到左滑动，就像一个幻灯片）

但是我也喜欢相反的效果，因此当从第2项和第34页开始时，它会从右向左滑动。到＆＃34;项目1＆＃34;。我无法弄清楚如何以两种方式做到这一点。

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

＆＃13;

importlib

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

为了获得轮播效果，您需要根据要转换的索引切换幻灯片类，因此您使用ngClass并将班级从slide-left更改为{{1}当移动到较低的索引时，反之亦然。

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

您的代码变为：

$timeout

检查UI Bootstrap。

此外，如果您已经有cache-control not working without etag，则可能需要尝试他们的轮播组件。

ngAnimate - 双向滑动

1 个答案: