CODEWITHSUNDEEP
javascriptangularjs
MisterJ
MisterJ

Reputation: 929

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

Upvotes: 1

Views: 721

Answers (1)

Francesco C
Francesco C

Reputation: 26

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

Upvotes: 1

Related Questions