MisterJ February 2016

Having a two directions animation swap using ng-animation-swap

I would like to have a sort of slider (but more like a ppt in fact, and depending on the button you click the outcome you would have will be different).

I use ng-animate-swap efficiently to change the current displayed slide, and it works well when going only in one way. My problem is when I try to go the other way, I change my animation class, but for the soon-to-be previous slide, the animation will still be the one of the state before... You can find a working example here inspired by the ng-animate-swap doc: http://plnkr.co/edit/dArF1W7eM7Znur7Myx3O?p=preview

As you can see the problem is the change on CSS class is only applied to the new slide, and not to the one that will be removed.

You can find the relevant code below :

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

Answers


Francesco C March 2016

Simply add a timeout after changed the cssClass in your nextNumber() and previousNumber() logic, so in the first cycle the element change the class and in the next cycle ng-animate-swap executes the animation.

$scope.nextNumber = function(){
  $scope.swapAnimation = "swap-animation";
  $timeout(function(){
    $scope.number += 1;
  });
};

$scope.previousNumber = function(){
  $scope.swapAnimation = "swap-animation-reverse";
  $timeout(function(){
    $scope.number -= 1;
  });
};

http://plnkr.co/edit/yEDmEWRGxIrAnalQF20u?p=preview

Post Status

Asked in February 2016
Viewed 3,249 times
Voted 5
Answered 1 times

Search




Leave an answer