ngAnimate — скольжение в обе стороны

Я борюсь с проблемой: у меня есть меню с x-количеством элементов. В этом примере у меня есть три элемента.

У каждого элемента есть раздел содержимого, поэтому, нажав на элемент меню, содержимое должно скользить.

Чего я добился до сих пор, так это того, что когда вы начинаете с «элемента 1» и переходите к «элементу 2», будет выполняться анимация (скользя справа налево, как слайд PowerPoint)

Но я бы хотел и обратный эффект, чтобы он скользил справа налево при переходе от «элемента 2» к «элементу 1». Я просто не могу понять, как это сделать для обоих способов.

Итак, я прошу какую-то карусель с ngAnimate, поэтому мне не придется возвращаться к jQuery для таких анимаций. Я хотел бы вырезать jQuery из своего проекта при использовании AngularJS.

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>


angularjs ng-animate
person Jorrex    schedule 01.03.2017    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Чтобы получить эффект карусели, вам нужно переключить класс слайда в зависимости от индекса, к которому вы переходите, поэтому вы используете ngClass и меняете класс с slide-left на slide-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, вы можете попробовать их карусельный компонент.

person Samir Aguiar    schedule 07.03.2017
comment
Не делает то, что я ожидал: / скольжение от контента 1 к контенту 2 идет слева направо, на самом деле это не то, что сделала бы карусель. Но я ценю ответ, я посмотрю на Bootstrap пользовательского интерфейса, когда у меня будет время :) - person Jorrex; 08.03.2017
comment
@Jorrex, пожалуйста, взгляните на отредактированный ответ, я думаю, теперь он работает так, как вы хотели. - person Samir Aguiar; 10.03.2017
comment
Да! Это то, что я хотел. Спасибо большое, я долго не мог понять и застрял на этом. Читая ваш код сейчас, это кажется таким простым.. - person Jorrex; 10.03.2017