I am seeking a unique slider-like feature, similar to a PowerPoint presentation where clicking different buttons yields various outcomes.
Using ng-animate-swap effectively allows me to switch between displayed slides smoothly, but I encounter an issue when attempting to navigate in reverse. While I can change the animation class, the soon-to-be previous slide retains the previous animation state. You may view a functional example inspired by the ng-animate-swap documentation here: http://plnkr.co/edit/dArF1W7eM7Znur7Myx3O?p=preview
The problem lies in the fact that CSS class changes are only applied to the new slide and not to the one being removed.
Below is the relevant code :
index.html :
<body ng-app="ngAnimateSwapExample">
<div ng-controller="AppCtrl">
<div class="container">
<div ng-animate-swap="number" class="cell {{swapAnimation}}" ng-class="colorClass(number)">
{{ number }}
</div>
</div>
<a ng-click="previousNumber()">PREVIOUS</a>
<a ng-click="nextNumber()">NEXT</a>
</div>
</body>
script.js :
.controller('AppCtrl', ['$scope',function($scope) {
$scope.number = 0;
var colors = ['red','blue','green','yellow','orange'];
$scope.colorClass = function(number) {
return colors[number % colors.length];
};
$scope.nextNumber = function(){
$scope.swapAnimation = "swap-animation";
$scope.number += 1;
};
$scope.previousNumber = function(){
$scope.swapAnimation = "swap-animation-reverse";
$scope.number -= 1;
};
}]);
animations.css :
.container {
height:250px;
width:250px;
position:relative;
overflow:hidden;
border:2px solid black;
}
.container .cell {
font-size:150px;
text-align:center;
line-height:250px;
position:absolute;
top:0;
left:0;
right:0;
border-bottom:2px solid black;
}
.swap-animation.ng-enter, .swap-animation.ng-leave {
transition:0.5s linear all;
}
.swap-animation.ng-enter {
top:-250px;
}
.swap-animation.ng-enter-active {
top:0px;
}
.swap-animation.ng-leave {
top:0px;
}
.swap-animation.ng-leave-active {
top:250px;
}
.swap-animation-reverse.ng-enter, .swap-animation-reverse.ng-leave {
transition:0.5s linear all;
}
.swap-animation-reverse.ng-enter {
top:250px;
}
.swap-animation-reverse.ng-enter-active {
top:0px;
}
.swap-animation-reverse.ng-leave {
top:0px;
}
.swap-animation-reverse.ng-leave-active {
top:-250px;
}