title: angular animations not working for ng-show when changing class using ng-class
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>The html for the left/right case is:</p>
  
  <pre><code>&lt;div class="slide-holder"&gt;
    &lt;ul class="slide-list"&gt;
      &lt;li class="slide-object" ng-show="directionElement == 0" ng-class="{'slide-object-left': direction === 'left', 'slide-object-right': direction === 'right'}"&gt;
        Hello There 1! How are you?&lt;/li&gt;
      &lt;li class="slide-object" ng-show="directionElement == 1" ng-class="{'slide-object-left': direction === 'left', 'slide-object-right': direction === 'right'}"&gt;
        Hello There 2! How are you?&lt;/li&gt;
      &lt;li class="slide-object" ng-show="directionElement == 2" ng-class="{'slide-object-left': direction === 'left', 'slide-object-right': direction === 'right'}"&gt;
        Hello There 3! How are you?&lt;/li&gt;
      &lt;li class="slide-object" ng-show="directionElement == 3" ng-class="{'slide-object-left': direction === 'left', 'slide-object-right': direction === 'right'}"&gt;
        Hello There 4! How are you?&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The functions in the controller for changing the direction are:</p>
  
  <pre><code>$scope.left = function() {
    $scope.direction === 'left'
    if($scope.directionElement &gt; 0)
      $scope.directionElement = $scope.directionElement - 1;
  };
  
  $scope.right = function() {
    $scope.direction === 'right'
    if($scope.directionElement &lt; 3)
    $scope.directionElement = $scope.directionElement + 1;
  };
  </code></pre>
  
  <p>The transitions css looks like this:</p>
  
  <pre><code>.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%;
  }
  </code></pre>
  
  <p>I have created a plnkr to show both cases: <a href="http://plnkr.co/edit/sh0uCAPZiCne4Y5ynFQ2?p=preview" rel="noreferrer">http://plnkr.co/edit/sh0uCAPZiCne4Y5ynFQ2?p=preview</a></p>
  
  <p><strong>EDIT 1:</strong> 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: <a href="http://plnkr.co/edit/lv1BBFjRoOmenTv7IBeC?p=preview" rel="noreferrer">http://plnkr.co/edit/lv1BBFjRoOmenTv7IBeC?p=preview</a></p>