ngAnimateSwap

- directive in module ngAnimate

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 or slider 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>
```

Animations

Animation	Occurs
enter	when the new element is inserted to the DOM
leave	when the old element is removed from the DOM

Click here to learn more about the steps involved in the animation.

Example

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

Load online demo