ngAnimateSwap is a animation-oriented directive that allows for the container to be removed and entered in whenever the associated expression changes. A common usecase for this directive is a rotating banner component which contains one image being present at a time. When the active image changes then the old image will perform a leave animation and the new element will be inserted via an enter animation.

Directive Info

This directive creates new scope.
This directive executes at priority level 0.

Usage

as attribute:
```
<ANY>
...
</ANY>
```

Example

Edit in Plunker

<div class="container" ng-controller="AppCtrl">
  <div ng-animate-swap="number" class="cell swap-animation" ng-class="colorClass(number)">
    {{ number }}
  </div>
</div>

angular.module('ngAnimateSwapExample', ['ngAnimate'])
.controller('AppCtrl', ['$scope', '$interval', function($scope, $interval) {
  $scope.number = 0;
  $interval(function() {
    $scope.number++;
  }, 1000);

  var colors = ['red','blue','green','yellow','orange'];
  $scope.colorClass = function(number) {
    return colors[number % colors.length];
  };
}]);

.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;
}
.red { background:red; }
.green { background:green; }
.blue { background:blue; }
.yellow { background:yellow; }
.orange { background:orange; }