Angular анимации, не работающие для ng-show при смене класса с использованием ng-класса

Я хочу создать слайдер для некоторых объектов, которые содержатся в неупорядоченном списке, используя ng-show и анимацию. У меня это хорошо работает, когда объекты скользят в одном направлении.

Однако, когда я хочу, чтобы пользователь мог перемещать объекты влево или вправо, используя ng-класс для изменения класса, анимация больше не работает.

html для левого/правого случая:

<div class="slide-holder">
  <ul class="slide-list">
    <li class="slide-object" ng-show="directionElement == 0" ng-class="{'slide-object-left': direction === 'left', 'slide-object-right': direction === 'right'}">
      Hello There 1! How are you?</li>
    <li class="slide-object" ng-show="directionElement == 1" ng-class="{'slide-object-left': direction === 'left', 'slide-object-right': direction === 'right'}">
      Hello There 2! How are you?</li>
    <li class="slide-object" ng-show="directionElement == 2" ng-class="{'slide-object-left': direction === 'left', 'slide-object-right': direction === 'right'}">
      Hello There 3! How are you?</li>
    <li class="slide-object" ng-show="directionElement == 3" ng-class="{'slide-object-left': direction === 'left', 'slide-object-right': direction === 'right'}">
      Hello There 4! How are you?</li>
  </ul>
</div>

Функции в контроллере для изменения направления:

$scope.left = function() {
  $scope.direction === 'left'
  if($scope.directionElement > 0)
    $scope.directionElement = $scope.directionElement - 1;
};

$scope.right = function() {
  $scope.direction === 'right'
  if($scope.directionElement < 3)
  $scope.directionElement = $scope.directionElement + 1;
};

Переходы css выглядят следующим образом:

.slide-object-left.ng-hide-add,
.slide-object-left.ng-hide-remove {
  -webkit-transition:0.5s linear all;
  -moz-transition:0.5s linear all;
  -o-transition:0.5s linear all;
  transition:0.5s linear all;

  position:absolute;
}

.slide-object-left.ng-hide-add {
  left:100%;
}

.slide-object-left.ng-hide-remove,
.slide-object-left.ng-hide-add.ng-hide-add-active {
  left:0;
}

.slide-object-left.ng-hide-remove.ng-hide-remove-active {
  left:-100%;
}

Я создал plnkr для отображения обоих случаев: http://plnkr.co/edit/sh0uCAPZiCne4Y5ynFQ2?p=preview

РЕДАКТИРОВАТЬ 1: Я обновил plnkr, чтобы исправить ошибку "===" в контроллере, которая вызывала переключение направления на неисправность, согласно ответу на теоретическую тему. Однако основная проблема и проблема с ng-классом остаются. Вот обновление plnkr: http://plnkr.co/edit/lv1BBFjRoOmenTv7IBeC?p=preview

Ответы

Ответ 1

Причина, по которой анимация не работает, связана с тем, что === в функциях вашего контроллера.

Вместо === вы должны использовать только =, потому что вы не хотите сравнивать $scope.direction со своей строкой.

$scope.left = function() {
  $scope.direction = 'left'
  if($scope.directionElement > 0)
    $scope.directionElement = $scope.directionElement - 1;
};

$scope.right = function() {
  $scope.direction = 'right'
  if($scope.directionElement < 3)
  $scope.directionElement = $scope.directionElement + 1;
};

Теперь анимация снова работает. Но есть еще кое-что, если вы хотите хорошую и правильную анимацию. Один из них, например, это изменить ваш css. Если вы замедляете анимацию, вы можете увидеть, что анимированный slide-object не работает.

Просто измените это, чтобы исправить:

.slide-object-left.ng-hide-add {
  right:-100%;
}

.slide-object-left.ng-hide-remove,
.slide-object-left.ng-hide-add.ng-hide-add-active {
  right:0;
}

.slide-object-left.ng-hide-remove.ng-hide-remove-active {
  right:100%;
}

.slide-object-right.ng-hide-add {
  left:-100%;
}

.slide-object-right.ng-hide-remove,
.slide-object-right.ng-hide-add.ng-hide-add-active {
  left:0%;
}

.slide-object-right.ng-hide-remove.ng-hide-remove-active {
  left:100%;
}

Я переключил right на left и дополнительно изменил алгебраический знак. Вы можете найти плунж с моими изменениями ЗДЕСЬ.

EDIT: Я не уверен, почему анимация настолько багги. Я думаю, это потому, что ng-class. Я удалил его и отредактировал ваш ng-show. Вы можете увидеть отредактированный Plunk ЗДЕСЬ. Это не лучшее решение, но на данный момент оно решает вашу проблему. (Возможно, вы можете улучшить его с помощью ЭТО скрипка)