I need assistance in creating a slider for a list of objects using ng-show and animations. The current setup works smoothly when the objects slide in one direction.
However, I am facing issues when trying to implement the functionality for users to slide the objects left or right by changing classes with ng-class. This is causing the animations to fail.
Below is the HTML code for handling the left/right sliding:
<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 controller functions responsible for changing the direction are as follows:
$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;
};
Here is the CSS code for transitions:
.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%;
}
To view both cases in action, I have created a plnkr demonstration: http://plnkr.co/edit/sh0uCAPZiCne4Y5ynFQ2?p=preview
UPDATE 1: I have rectified the '===' error in the controller which caused the direction switching problem, based on the feedback from Theoretisch. Nevertheless, the main issue with ng-class and animations persists. Here is the updated plnkr link for reference: http://plnkr.co/edit/lv1BBFjRoOmenTv7IBeC?p=preview