angular animations not working for ng-show when changing class using ng-class

Question

I want to create a slider for some objects that are contained in an unordered list, using ng-show and animations. I have this working well when the objects are sliding in one direction.

However, when I want the user to be able to slide objects left or right, using ng-class to change the class, the animations no longer work.

The html for the left/right case is:

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

The functions in the controller for changing the direction are:

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

The transitions css looks like this:

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

I have created a plnkr to show both cases: http://plnkr.co/edit/sh0uCAPZiCne4Y5ynFQ2?p=preview

EDIT 1: I've updated the plnkr to fix the '===' mistake in the controller which was causing the switching of direction to malfunction, as per the answer by Theoretisch. However, the main ng-class problem and animation problem remains. Here is the update plnkr: http://plnkr.co/edit/lv1BBFjRoOmenTv7IBeC?p=preview

Hueyhuff

Answer 1

The reason why the animation isn't working is because the === in the functions of your controller.

Instead of the === you should use just = because you don't want to compare $scope.direction with your string.

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

Now the animation works again. But there are some more things to do if you want a good and correct animation. One of them e.g. is to change your css. If you slow down your animation you can see that the wrong slide-object is animated.

Just change this to correct it:

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

I switched right to left and changed additionally the algebraic sign. You can find the plunk with my changes HERE.

EDIT: I'm not sure why the animation is so buggy. I think it is because the ng-class. I deleted it and edited your ng-show. You can see the edited Plunk HERE. It's not the best solution, but it solves your problem for now I hope. (Maybe you can improve it with THIS fiddle)

Boarish

Hi theoretisch - the '===' thing works perfectly! Can't believe I didn't spot that - was staring at it for weeks. The CSS changes you have made in the plnkr don't seem to work. The first time you click on right/left at the bottom it displays some weird behaviour - what do you reckon is going on? – Baronetage

The css should work, but I don't know why there is the bug at the first click. I Assume it's something with the scope but I'm not sure. I'm still trying to fix that... but I have no solution for now... – Boarish

@TomO'Brien I added a better version. Now the animation works. – Boarish

I imagine poster wants item 1 to slide out and item 2 to come into view. The current behavior is weird, item 1 disappears, item 2 slides away then reappears at the start – Arthurarthurian

I know, I just made the animation work (like the poster asked). I think which item animates which way should he decide and code on it's own. But feel free to write the code for him, if you whant. – Boarish

@TomO'Brien see my last plunk in the edit. There I fixed the animation problem. You just have to adjust the way of the items like you want and it should work. – Boarish

if you slow the transition down to 5 seconds you can see exactly what is going wrong - don't think the last plunk has quite fixed it yet. Very bizarre behaviour. – Baronetage

Hm you're right, didn't saw that. Just the stop at the first time disappeared. The sliding is still not correct. – Boarish